/* ============================================================
   nishantsharmax.com
   Light-first, dark opt-in. Self-contained: no framework.
   ============================================================ */

:root{
  --bg:#F6F8FA; --bg-2:#FFFFFF; --bg-3:#EDF2F6;
  --line:#DCE4EB; --line-2:#C2D0DB;
  --ink:#0C1620; --ink-2:#44566A; --ink-3:#5E7183;
  --accent:#0D7A70; --accent-ink:#FFFFFF; --accent-dim:#D5F3EF;
  --warn:#A65200; --crit:#B3211C;
  --radius:10px; --radius-lg:16px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1180px;
  --shadow:0 1px 2px rgba(14,30,48,.05), 0 12px 28px -16px rgba(14,30,48,.20);
}
[data-theme="dark"]{
  --bg:#0A0E13; --bg-2:#0F151C; --bg-3:#141C25;
  --line:#1E2A36; --line-2:#2A3947;
  --ink:#E8EEF4; --ink-2:#A6B4C2; --ink-3:#6D7E8E;
  --accent:#5EEAD4; --accent-ink:#062B26; --accent-dim:#1B4A45;
  --warn:#FBBF24; --crit:#F87171;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 0%,transparent 75%);
          mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 0%,transparent 75%);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.02em;font-weight:700}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
          backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s;
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){header{background:var(--bg)}}
header.stuck{border-bottom-color:var(--line)}
.hbar{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-dim);flex:none}
.brand small{display:block;font:500 11px/1 var(--mono);color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
nav.main{margin-left:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a{padding:7px 11px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
nav.main a:hover{color:var(--ink);background:var(--bg-3);text-decoration:none}
nav.main a.active{color:var(--accent);background:var(--accent-dim)}
.hbtns{display:flex;gap:8px;flex:none}
.iconbtn{
  width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--bg-2);border-radius:9px;color:var(--ink-2);cursor:pointer;
}
.iconbtn:hover{color:var(--ink);border-color:var(--line-2)}
.hbtn-text{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;flex:none;
  border:1px solid var(--line);background:var(--bg-2);border-radius:9px;color:var(--ink);
  font:600 13px/1 var(--sans);cursor:pointer;white-space:nowrap;
}
.hbtn-text:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);text-decoration:none}
.hbtn-text svg{width:15px;height:15px;fill:currentColor;flex:none}
@media(max-width:560px){.hbtn-text span{display:none}.hbtn-text{padding:0 10px}}
.iconbtn .i-sun{display:none}
[data-theme="dark"] .iconbtn .i-sun{display:block}
[data-theme="dark"] .iconbtn .i-moon{display:none}
@media(max-width:960px){nav.main{display:none}}

/* ---------- Hero ---------- */
.hero{padding:52px 0 28px}
/* Right column is capped so the portrait + Now card can't out-tower the copy —
   an unbalanced pair here leaves dead space on both sides of the left column. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,310px);gap:48px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font:500 11.5px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent-dim);background:var(--accent-dim);
  padding:7px 12px;border-radius:99px;margin-bottom:22px;
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.4rem);font-weight:800;letter-spacing:-.045em;margin-bottom:18px}
.hero h1 .fade{color:var(--ink-3)}
.lede{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ink-2);max-width:60ch;margin-bottom:14px;line-height:1.55}
.lede strong{color:var(--ink);font-weight:600}
.roleline{font:500 13px/1.7 var(--mono);color:var(--ink-3);letter-spacing:.02em;margin-bottom:30px}
.roleline span{color:var(--accent)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:9px;
  font-size:14.5px;font-weight:600;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);
  cursor:pointer;font-family:inherit;transition:transform .15s,border-color .15s;
}
.btn:hover{text-decoration:none;border-color:var(--line-2);transform:translateY(-1px)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.08)}
.socials{display:flex;flex-wrap:wrap;gap:6px}
.socials a{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink-2)}
.socials a:hover{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-dim);text-decoration:none}
.socials svg{width:17px;height:17px;fill:currentColor}

.portrait{position:relative}
/* height:auto is load-bearing — the img's height="797" attribute is a presentational
   hint, and with both dimensions definite the browser ignores aspect-ratio entirely. */
.portrait img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow);display:block}
.portrait::after{
  content:"";position:absolute;inset:-14px;border-radius:22px;z-index:-1;
  background:radial-gradient(circle at 70% 20%,var(--accent-dim),transparent 65%);filter:blur(24px);
}
.nowcard{margin-top:14px;border:1px solid var(--line);background:var(--bg-2);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.nowcard .k{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.nowcard .v{font-weight:650;font-size:15px}
.nowcard .s{font-size:13px;color:var(--ink-2);margin-top:3px}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}.portrait{max-width:260px}}

/* ---------- Stat rail ---------- */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin:0 0 8px}
.stat{background:var(--bg-2);padding:20px 16px;text-align:center}
.stat b{display:block;font:700 clamp(1.4rem,3vw,1.9rem)/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.stat b i{font-style:normal;font-size:.6em}
.stat span{display:block;font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
@media(max-width:900px){.stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- Sections ---------- */
section{padding:64px 0;scroll-margin-top:80px}
.sechead{display:flex;align-items:baseline;gap:16px;margin-bottom:34px;flex-wrap:wrap}
.secnum{font:500 12px/1 var(--mono);color:var(--accent);letter-spacing:.1em}
.sechead h2{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:750;letter-spacing:-.035em}
.sechead .rule{flex:1;height:1px;background:var(--line);min-width:40px}
.sechead .count{font:500 12px/1 var(--mono);color:var(--ink-3)}

.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start}
.about .prose{font-size:16.5px;color:var(--ink-2)}
.about .prose p:first-child{font-size:19px;color:var(--ink);line-height:1.55}
.about .prose strong{color:var(--ink);font-weight:600}
.facts{padding:6px 0;margin:0}
.fact{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.fact:last-child{border-bottom:0}
.fact dt{font:500 10.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);width:88px;flex:none}
.fact dd{margin:0;font-size:14px;font-weight:500}
@media(max-width:880px){.about{grid-template-columns:1fr}}

/* ---------- Capabilities ---------- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}
.cap{padding:22px;position:relative;overflow:hidden}
.cap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.65}
.cap-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.cap h3{font-size:16.5px;font-weight:650;letter-spacing:-.02em}
.level{font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border-radius:6px;flex:none;background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-dim)}
.level[data-l="expert"]{background:var(--bg-3);color:var(--warn);border-color:var(--line-2)}
.level[data-l="advanced"]{background:var(--bg-3);color:var(--ink-2);border-color:var(--line-2)}
.cap p{font-size:14px;color:var(--ink-2);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 11.5px/1 var(--mono);padding:6px 9px;border-radius:6px;background:var(--bg-3);border:1px solid var(--line);color:var(--ink-2)}

/* ---------- Experience timeline ---------- */
.tl{position:relative;padding-left:34px;list-style:none}
.tl::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:2px;background:var(--line)}
.job{position:relative;margin-bottom:18px}
.job::before{content:"";position:absolute;left:-30px;top:24px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2.5px solid var(--line-2);z-index:1}
.job.current::before{border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-dim)}
.jobcard{padding:24px 26px}
.jobhead{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.jobhead h3{font-size:19px;font-weight:700;letter-spacing:-.025em;margin-bottom:6px}
.org{font-size:14.5px;color:var(--ink-2);font-weight:500}
.org .acq{font-size:12.5px;color:var(--ink-3)}
.when{font:500 12px/1 var(--mono);color:var(--ink-3);letter-spacing:.03em;white-space:nowrap;padding-top:4px}
.badge-now{font:700 10px/1 var(--mono);letter-spacing:.12em;padding:5px 8px;border-radius:5px;background:var(--accent);color:var(--accent-ink);margin-left:8px;vertical-align:2px}
.bul{margin:0;padding:0;list-style:none}
.bul li{position:relative;padding-left:20px;margin-bottom:9px;font-size:14.8px;color:var(--ink-2)}
.bul li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:1px;background:var(--line-2);transform:rotate(45deg)}
.bul li strong{color:var(--ink);font-weight:650}
.bul .sub{margin-top:8px;padding-left:4px}
.bul .sub li{font-size:14px}
.m{color:var(--accent);font-weight:700;font-family:var(--mono);font-size:.95em}

/* ---------- Press wall ---------- */
.press{margin-top:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden}
.press-head{
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg-3);
  font:500 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
}
.press-head b{color:var(--accent);font-weight:700}
.research{padding:18px 16px;border-bottom:1px solid var(--line)}
.research:last-child{border-bottom:0}
.research h4{font-size:15.5px;font-weight:650;margin-bottom:8px;letter-spacing:-.015em}
.research .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tagline{font:500 11px/1 var(--mono);color:var(--ink-3);letter-spacing:.06em}
.outlets{display:flex;flex-wrap:wrap;gap:6px}
.outlet{font-size:12.5px;font-weight:500;padding:5px 10px;border-radius:6px;background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2)}
.outlet:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.outlet.tier1{border-color:var(--line-2);color:var(--ink);font-weight:650}
.more{font:600 12px/1 var(--mono);padding:6px 10px;border-radius:6px;cursor:pointer;background:transparent;border:1px dashed var(--line-2);color:var(--ink-3)}
.more:hover{color:var(--accent);border-color:var(--accent)}
.hidden{display:none}

/* ---------- Filterable index ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.search{flex:1;min-width:220px;position:relative}
.search input{width:100%;padding:10px 14px 10px 38px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);font:400 14.5px/1.4 var(--sans)}
.search input::placeholder{color:var(--ink-3)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;fill:var(--ink-3)}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{font:500 12.5px/1 var(--sans);padding:9px 13px;border-radius:8px;cursor:pointer;background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2)}
.pill:hover{border-color:var(--line-2);color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:650}

.entries{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-2);list-style:none}
.entry{display:flex;gap:16px;align-items:baseline;padding:14px 18px;border-bottom:1px solid var(--line)}
.entry:last-child{border-bottom:0}
.entry:hover{background:var(--bg-3)}
.entry .title{flex:1;font-size:15px;font-weight:550;color:var(--ink)}
.entry .title a{color:var(--ink);border-bottom:1px solid var(--accent-dim)}
.entry .title a:hover{color:var(--accent);text-decoration:none}
.venue{font:500 11.5px/1 var(--mono);color:var(--ink-3);letter-spacing:.05em;white-space:nowrap}
.vtag{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:5px;background:var(--bg-3);border:1px solid var(--line);color:var(--ink-2);flex:none}
.vtag[data-v="defcon"]{color:var(--crit);border-color:var(--line-2)}
.vtag[data-v="blackhat"]{color:var(--warn);border-color:var(--line-2)}
.vtag[data-v="online"]{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-dim)}
.vid{font:500 11px/1 var(--mono);color:var(--accent);white-space:nowrap}
.empty{padding:30px;text-align:center;color:var(--ink-3);font-size:14px}
@media(max-width:640px){.entry{flex-wrap:wrap;gap:8px}.venue{width:100%}}

/* ---------- Sub-groups ---------- */
.group{margin-bottom:34px}
.grouphead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.grouphead h3{font-size:15px;font-weight:650;letter-spacing:-.01em}
.grouphead .n{font:500 11px/1 var(--mono);color:var(--ink-3)}
.grouphead .rule{flex:1;height:1px;background:var(--line)}

.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;list-style:none}
.tool{padding:16px;display:flex;gap:12px;align-items:flex-start}
.tool:hover{border-color:var(--accent);text-decoration:none}
.tool .ic{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--accent-dim);color:var(--accent);font:700 14px/1 var(--mono)}
.tool b{display:block;font-size:14.5px;color:var(--ink);font-weight:650}
.tool span span{font-size:12.5px;color:var(--ink-3)}

.cve{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.cve:last-child{border-bottom:0}
.sev{font:700 10.5px/1 var(--mono);letter-spacing:.08em;padding:6px 9px;border-radius:5px;flex:none;min-width:74px;text-align:center}
.sev.critical{background:var(--bg-3);color:var(--crit);border:1px solid var(--line-2)}
.sev.high{background:var(--bg-3);color:var(--warn);border:1px solid var(--line-2)}
.sev.hof{background:var(--bg-3);color:var(--ink-2);border:1px solid var(--line-2)}

/* ---------- Education ---------- */
.edu{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;list-style:none}
.edu .jobcard{height:100%}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;list-style:none}
.shot{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);cursor:zoom-in;background:var(--bg-2);aspect-ratio:3/2;margin:0}
.shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .45s,transform .45s;display:block}
.shot:hover img,.shot:focus-visible img{filter:none;transform:scale(1.04)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 11px;font-size:12.5px;font-weight:550;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.85));opacity:0;transition:opacity .3s}
.shot:hover figcaption,.shot:focus-visible figcaption{opacity:1}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(5,8,11,.96);display:none;place-items:center;padding:56px 20px}
.lightbox.open{display:grid}
.lightbox img{max-width:min(1100px,92vw);max-height:78vh;border-radius:10px;object-fit:contain}
.lb-cap{text-align:center;color:#A6B4C2;font:500 13px/1.5 var(--mono);margin-top:16px}
.lb-btn{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:20px}
.lb-btn:hover{background:rgba(255,255,255,.18)}
.lb-close{top:20px;right:20px}
.lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lb-next{right:20px;top:50%;transform:translateY(-50%)}

/* ---------- Playlist (player + our own sidebar) ---------- */
.pl{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}
/* .pl-listwrap holds only an absolutely-positioned child, so it contributes no
   height of its own: the grid row is sized by the player, and stretch makes the
   list match the video exactly at any width. */
.pl-listwrap{position:relative;min-height:0}
.pl-list{
  position:absolute;inset:0;overflow-y:auto;list-style:none;margin:0;padding:0;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-2);
}
.pl-item{
  display:flex;gap:12px;width:100%;text-align:left;align-items:baseline;
  padding:12px 14px;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:var(--ink);font-family:inherit;cursor:pointer;
}
.pl-item:hover{background:var(--bg-3)}
.pl-list li:last-child .pl-item{border-bottom:0}
.pl-n{font:600 11px/1.5 var(--mono);color:var(--ink-3);flex:none}
.pl-t{font-size:13.5px;font-weight:550;line-height:1.4}
.pl-v{display:block;font:500 10.5px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.pl-item[aria-current="true"]{background:var(--accent-dim)}
.pl-item[aria-current="true"] .pl-n,
.pl-item[aria-current="true"] .pl-t{color:var(--accent)}
.pl-item[aria-current="true"] .pl-n::after{content:" ▶"}
@media(max-width:900px){
  .pl{grid-template-columns:1fr}
  .pl-listwrap{min-height:auto}
  .pl-list{position:static;max-height:300px}
}

/* ---------- Video ---------- */
.video{position:relative;padding-bottom:56.25%;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.facade{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;border:0;width:100%;background:linear-gradient(140deg,var(--bg-3),var(--bg-2));font-family:inherit}
.facade-in{display:block;text-align:center}
.facade .play{width:72px;height:72px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:26px;margin:0 auto}
.facade .lbl{display:block;margin-top:16px;font:500 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:44px 0;margin-top:40px;background:var(--bg-2);position:relative;z-index:1}
.footgrid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.footgrid p{margin:0;font-size:13.5px;color:var(--ink-3)}

/* Shown only in the printed / saved-as-PDF document. */
.print-only{display:none}

/* ---------- Print ---------- */
@media print{
  /* #playlist is dropped entirely — a YouTube embed cannot render on paper.
     Hiding .video alone would still leave its "08 Research Talk Playlist" heading. */
  body::before,header,.cta,.socials,.toolbar,.lightbox,.video,.portrait::after,.more,
  #playlist{display:none!important}
  .print-only{display:block!important}
  .print-contact{font:500 9.5pt/1.7 var(--mono);color:#000;margin:10px 0 0}
  body{background:#fff;color:#000;font-size:10.5pt}
  .hero{padding:0 0 20px}
  .card,.entries,.press{border-color:#ccc;box-shadow:none}
  section{padding:14px 0}
  .job,.entry,.cve,.research,.cap{break-inside:avoid}
  .sechead{break-after:avoid}
  /* Restore everything JS folded away, each to its correct display type — a blanket
     rule here would re-show filtered rows as inline-block and wreck their layout. */
  .outlets .hidden{display:inline-block!important}
  .entry.hidden{display:flex!important}
  .entries.hidden{display:block!important}
  .empty{display:none!important}
  a{color:#000}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}