:root{--bg:#eef7ee;--text:#12301f;--muted:#4a6656;--accent:#1b5e3a;--accent2:#2e7d4f;--line:#cfe3d3;--card:#e2f1e4;--header:#e4f2e6}
[data-theme=dark]{--bg:#0f2a1c;--text:#e3f4e6;--muted:#9fc8aa;--accent:#8fdc9f;--accent2:#b5ebbf;--line:#1f4a33;--card:#143723;--header:#0b2216}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}img{max-width:100%;height:auto}body{margin:0;overflow-wrap:break-word;font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.65;transition:background .2s,color .2s}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.wrap{width:100%;max-width:960px;margin:0 auto;padding:0 clamp(14px,4vw,28px)}
header{position:sticky;top:0;background:var(--header);border-bottom:1px solid var(--line);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:600;color:var(--text);font-size:1.05rem}.brand span{font-weight:300}
.menu{display:flex;gap:22px;align-items:center;list-style:none;margin:0;padding:0}
.menu a{color:var(--text);font-size:.95rem}.menu a.active{color:var(--accent);font-weight:600}
.btn-icon{background:none;border:0;cursor:pointer;color:var(--text);font-size:1.1rem;padding:4px}
#menu-toggle{display:none}
main{padding:40px 0 60px}
h1{font-size:clamp(1.6rem,4.5vw,2.4rem);font-weight:300;margin:0 0 6px}h1 b{font-weight:600}
h2{font-size:1.35rem;font-weight:500;color:var(--accent);margin:44px 0 14px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.subtitle{color:var(--muted);margin:0 0 28px}
.profile{float:right;width:240px;margin:8px 0 20px 30px;text-align:center}
.profile img{width:100%;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.affil{font-size:.85rem;color:var(--muted);margin-top:10px;line-height:1.5}
.social{clear:both;text-align:center;font-size:1.6rem;padding:18px 0 4px;display:flex;justify-content:center;gap:22px;flex-wrap:wrap}
.social a{color:var(--text)}.social a:hover{color:var(--accent);text-decoration:none}
.social svg{width:36px;height:36px;fill:currentColor}
.contact-note{text-align:center;color:var(--muted);font-size:.95rem}
.news{width:100%;border-collapse:collapse}.news td{padding:8px 0;vertical-align:top;border-bottom:1px solid var(--line)}
.news td.date{width:120px;color:var(--muted);font-weight:500;white-space:nowrap;padding-right:16px}
.year{font-size:1.6rem;font-weight:300;color:var(--muted);text-align:right;margin:30px 0 4px}
.pub{display:flex;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.pub .thumb{flex:0 0 150px}.pub .thumb img{width:100%;border-radius:4px;border:1px solid var(--line)}
.pub .badge{display:inline-block;background:var(--accent);color:var(--bg);font-size:.72rem;padding:2px 8px;border-radius:3px;font-weight:600;margin-bottom:6px}
.pub .title{font-weight:600}.pub .authors{font-size:.95rem}.pub .authors b{text-decoration:underline}
.pub .venue{font-style:italic;color:var(--muted);font-size:.92rem}
.links{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}
.links a,.links button{font-size:.75rem;border:1px solid var(--text);color:var(--text);background:none;padding:2px 10px;border-radius:3px;cursor:pointer;font-family:inherit}
.links a:hover,.links button:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.abstract{display:none;margin-top:10px;font-size:.92rem;background:var(--card);padding:12px 14px;border-radius:4px}
.abstract.open{display:block}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.card img{width:100%;height:150px;object-fit:cover;display:block}
.card .body{padding:14px 16px}.card h3{margin:0 0 6px;font-size:1.05rem}.card p{margin:0;font-size:.92rem;color:var(--muted)}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:12px 0 12px 18px;border-left:2px solid var(--line);position:relative}
.timeline li:before{content:"";position:absolute;left:-6px;top:20px;width:10px;height:10px;border-radius:50%;background:var(--accent2)}
.timeline .when{color:var(--muted);font-size:.88rem}
.more{text-align:center;margin-top:20px}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;text-align:center;padding:20px 0}
@media(max-width:720px){
 #menu-toggle{display:block}
 .menu{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;background:var(--header);border-bottom:1px solid var(--line);padding:14px 0;gap:12px}
 .menu.open{display:flex}
 .profile{float:none;margin:0 auto 20px;width:200px}
 .pub{flex-direction:column}.pub .thumb{flex:none;width:180px}
 h1{font-size:1.8rem}
}

::selection{background:var(--accent);color:var(--bg)}
.menu a:hover{color:var(--accent2)}
@media(min-width:1400px){.wrap{max-width:1100px}body{font-size:1.06rem}.profile{width:280px}}
@media(min-width:721px) and (max-width:960px){.menu{gap:14px}.menu a{font-size:.9rem}.profile{width:200px}}
@media(max-width:720px){.menu a{font-size:1.05rem;padding:6px 0;display:block}.cards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){
 .news tr{display:block;padding:8px 0;border-bottom:1px solid var(--line)}.news td{display:block;border:0;padding:2px 0}.news td.date{width:auto}
 .cards{grid-template-columns:1fr}.pub .thumb{width:100%;max-width:260px}.year{text-align:left}
 .social{gap:14px}.profile{width:170px}h2{font-size:1.2rem}
}
@media(max-width:360px){body{font-size:.95rem}.brand{font-size:.95rem}.social svg{width:30px;height:30px}}
.nav-right{display:flex;align-items:center;gap:18px}#theme-toggle{font-size:1.25rem}
@media(max-width:720px){.nav-right{gap:10px}}
/* v3 content blocks */
.hi{margin:0;color:var(--accent2);font-weight:500;letter-spacing:.02em}
.hero::after{content:"";display:block;clear:both}
.callout{margin:30px 0 0;padding:14px 18px;border-left:4px solid var(--accent);background:var(--card);border-radius:6px}
h2 .viewall{float:right;font-size:.85rem;font-weight:400;margin-top:6px}
.ncards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.ncard,.post{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px;display:flex;flex-direction:column}
.ncard p,.post p{margin:6px 0 10px;font-size:.92rem;color:var(--muted);flex:1}
.ndate{font-size:.8rem;color:var(--accent2);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ntitle{font-weight:600;color:var(--text);margin-top:4px}
.nbtn{font-size:.82rem;font-weight:600}
.post{margin-bottom:14px}
.rfig{margin:0 0 18px;text-align:center}.rfig img{max-width:640px;width:100%;border-radius:8px;border:1px solid var(--line)}
.rfig figcaption{font-size:.85rem;color:var(--muted);margin-top:6px}
footer .foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;text-align:left;line-height:1.6}
footer .small{align-self:flex-end}
footer{background:var(--header)}
/* collapse menu earlier now that nav has 10 items */
@media(max-width:1100px){
 #menu-toggle{display:block}
 .menu{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;background:var(--header);border-bottom:1px solid var(--line);padding:14px 0;gap:6px;align-items:center}
 .menu.open{display:flex}.menu a{font-size:1.05rem;padding:6px 0;display:block}
}
@media(max-width:520px){footer .foot{flex-direction:column;text-align:center}footer .small{align-self:center}h2 .viewall{float:none;display:block;margin-top:4px}}
.brand{white-space:nowrap}@media(min-width:1101px) and (max-width:1300px){.menu{gap:16px}.menu a{font-size:.92rem}}
/* v4: dropdown nav + new pages */
.dd{position:relative}
.dd-btn{background:none;border:0;font:inherit;font-size:.95rem;color:var(--text);cursor:pointer;padding:0}
.dd-btn.active{color:var(--accent);font-weight:600}.dd-btn:hover{color:var(--accent2)}
.caret{font-size:.7em}
.sub{list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:-14px;min-width:170px;background:var(--header);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);display:none}
.sub li a{display:block;padding:7px 16px;white-space:nowrap}
.sub li a:hover{background:var(--card);text-decoration:none}
.dd:hover .sub,.dd.open .sub{display:block}
.dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
@media(max-width:1100px){
 .dd{text-align:center}.dd-btn{font-size:1.05rem;padding:6px 0}
 .sub{position:static;box-shadow:none;border:0;background:none;padding:0;min-width:0}
 .sub,.dd:hover .sub{display:none}.dd.open .sub{display:block}
 .sub li a{font-size:.95rem!important;color:var(--muted);padding:4px 0}
}
.facts{padding-left:20px}.facts li{margin:4px 0}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.person{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px}
.person img{width:64px;height:64px;border-radius:50%;flex:none;object-fit:cover}
.person .role{font-size:.85rem;color:var(--accent2)}.person p{margin:4px 0 0;font-size:.9rem;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.card h3{color:var(--accent)}
/* v5 flat nav */
.nav{gap:24px}.menu a{white-space:nowrap}
@media(min-width:1101px) and (max-width:1240px){.menu{gap:12px}.menu a{font-size:.88rem}.nav-right{gap:12px}}
/* v6: workplace logos */
.affil-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 0;text-align:left}
.logo{width:26px;height:26px;border-radius:6px;object-fit:contain;background:#fff;flex:none;box-shadow:0 0 0 1px var(--line)}
.timeline.logos li{display:flex;gap:12px;align-items:flex-start}
.timeline.logos .logo{width:40px;height:40px;margin-top:2px}
/* v6: Unfiltered — Fraunces + Newsreader */
.uf{--h:'Fraunces',Georgia,serif;--b:'Newsreader',Georgia,serif;max-width:740px}
.uf-h1{font-family:var(--h);font-weight:800;font-size:clamp(2.4rem,7vw,3.8rem);line-height:1.02;letter-spacing:-.01em;margin:6px 0 8px;color:var(--text)}
.uf-sub{font-family:var(--b);font-style:italic;font-size:clamp(1.05rem,2.5vw,1.25rem);color:var(--muted);margin:0 0 28px}
.uf-item{display:block;padding:20px 0;border-top:1px solid var(--line);color:var(--text)}
.uf-item:hover{text-decoration:none}.uf-item:hover .uf-title{color:var(--accent)}
.uf-date{font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);font-weight:600}
.uf-title{font-family:var(--h);font-weight:600;font-size:clamp(1.4rem,3.5vw,1.8rem);line-height:1.2;margin:4px 0;transition:color .15s}
.uf-teaser{font-family:var(--b);font-size:1.1rem;color:var(--muted);margin:2px 0 6px}
.uf-more{font-size:.85rem;font-weight:600;color:var(--accent)}
.uf-article{margin:0 auto}
.uf-article p,.uf-article li{font-family:var(--b);font-size:clamp(1.08rem,2.2vw,1.2rem);line-height:1.78}
.uf-article h2{font-family:var(--h);font-weight:600;border:0;color:var(--text);font-size:1.6rem}
.uf-back{font-size:.9rem;display:inline-block;margin-bottom:18px}
.uf-hero{margin:0 0 26px}.uf-hero img{width:100%;max-height:420px;object-fit:cover;border-radius:10px}
.uf-hero figcaption{font-family:var(--b);font-style:italic;font-size:.9rem;color:var(--muted);text-align:center;margin-top:6px}
.dropcap::first-letter{font-family:var(--h);font-weight:800;float:left;font-size:3.7em;line-height:.85;padding:6px 10px 0 0;color:var(--accent)}
.uf-article blockquote{margin:28px 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);font-family:var(--h);font-style:italic;font-size:clamp(1.3rem,3vw,1.6rem);line-height:1.4;color:var(--accent)}
.uf-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:24px 0}
.uf-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.uf-sig{font-family:'Caveat',cursive!important;font-size:1.9rem!important;color:var(--accent);margin-top:26px}
.profile img.logo{width:26px;height:26px;border-radius:6px;box-shadow:0 0 0 1px var(--line)}
/* v7: casual hero (Hey, I'm …) */
.hero{padding-top:clamp(28px,6vw,64px)}
.intro{max-width:none}
.hey{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(2.3rem,6vw,3.9rem);line-height:1.05;letter-spacing:-.01em;margin:0 0 18px;color:var(--text)}
.wave{display:inline-block;font-style:normal;font-size:.8em;transform-origin:70% 70%;animation:wave 2.4s ease-in-out 1s 2}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
@media(prefers-reduced-motion:reduce){.wave{animation:none}}
.lead{font-family:'Newsreader',Georgia,serif;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.2;margin:0 0 28px;color:var(--text)}
.say{font-family:'Newsreader',Georgia,serif;font-size:clamp(1.15rem,2.4vw,1.4rem);line-height:1.5;margin:0 0 20px;color:var(--text)}
.say a,.lead a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.nw{white-space:nowrap}
/* v8: hero in Palatino (like Ahmad's), no emoji */
.hey,.lead,.say{font-family:'Palatino Linotype','Book Antiqua',Palatino,'URW Palladio L','P052',Georgia,serif;font-variation-settings:normal}
.hey{font-style:italic;font-weight:400}
.affil{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px}.affil-row{justify-content:flex-start}
.hey,.lead,.say{font-family:'Palatino Linotype','Book Antiqua',Palatino,'URW Palladio L','TeX Gyre Pagella','P052',Georgia,serif}
@media(max-width:520px){.hero .profile{width:100%;margin:0 0 20px}.hero .profile>img{width:170px;display:block;margin:0 auto}.hero .affil{display:flex;width:fit-content;max-width:100%;margin:10px auto 0}}
/* ===== v9: one typeface site-wide (Palatino, like Ahmad's) + roomier top spacing ===== */
:root{--serif:'Palatino Linotype','Book Antiqua',Palatino,'URW Palladio L','TeX Gyre Pagella','P052',Georgia,serif}
body,button,input,.brand,.menu a,.dd-btn,.btn-icon,footer,
.ndate,.pdate,.badge,.links a,.links button,.nbtn,.uf-more,.when,.affil,.role,.subtitle,
.hey,.lead,.say{font-family:var(--serif)!important;font-variation-settings:normal}
body{font-size:1.08rem;line-height:1.7}
main.wrap{padding-top:clamp(36px,7vw,80px);padding-bottom:60px}
.hero{padding-top:0}
/* page titles: big italic, same as "Hey, I'm …" */
main h1,.uf-h1{font-style:italic;font-weight:400;font-size:clamp(2.3rem,6vw,3.9rem);line-height:1.08;letter-spacing:-.01em;margin:0 0 14px;color:var(--text)}
main h1 b{font-weight:400}
.subtitle,.uf-sub{font-size:clamp(1.15rem,2.6vw,1.45rem);line-height:1.45;color:var(--muted);font-style:normal;margin-bottom:30px}
h2{font-weight:400;font-size:clamp(1.4rem,3vw,1.75rem)}
h3,.card h3,.ntitle,.uf-title,.pub .title{font-weight:600}
.uf-title{font-size:clamp(1.35rem,3.2vw,1.7rem)}
.ndate,.uf-date{letter-spacing:.06em;font-weight:600}
.menu a{font-size:1rem}.brand{font-size:1.12rem}
.uf-sig{font-style:italic;font-size:1.5rem!important}
.dropcap::first-letter{font-weight:400}
@media(min-width:1101px) and (max-width:1300px){.menu{gap:12px}.menu a{font-size:.93rem}}
/* ===== v10: Unfiltered back to Option A (Fraunces titles + Newsreader body + Caveat sign-off) ===== */
.uf{--h:'Fraunces',Georgia,serif;--b:'Newsreader',Georgia,serif}
main .uf .uf-h1{font-family:var(--h);font-style:normal;font-weight:800;font-size:clamp(2.4rem,7vw,3.8rem);line-height:1.02;letter-spacing:-.01em;margin:6px 0 8px}
.uf .uf-sub{font-family:var(--b);font-style:italic;font-size:clamp(1.05rem,2.5vw,1.25rem);margin:0 0 28px}
.uf .uf-title{font-family:var(--h);font-weight:600}
.uf .uf-teaser,.uf-article p,.uf-article li,.uf-hero figcaption{font-family:var(--b)}
.uf .uf-date{font-family:'Inter',system-ui,sans-serif;letter-spacing:.08em}
.uf .uf-more{font-family:'Inter',system-ui,sans-serif}
.uf-article h2,.uf-article blockquote{font-family:var(--h)}
.uf-article .dropcap::first-letter{font-family:var(--h);font-weight:800}
.uf-article .uf-sig{font-family:'Caveat',cursive!important;font-style:normal;font-size:1.9rem!important}
/* ===== v11: Option 7 — Fraunces (upright, bold) for "Hey, I'm …" and every page title ===== */
:root{--title:'Fraunces',Georgia,serif}
main .hey,main h1{font-family:var(--title)!important;font-style:normal;font-weight:700;letter-spacing:-.015em}
main h1 b{font-weight:700}
main .hey{font-size:clamp(2.2rem,5.4vw,3.5rem)}
/* ===== v12: Unfiltered matched exactly to the Option A preview ===== */
main .uf-article{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:clamp(18px,4vw,40px);max-width:720px;margin:0}
main .uf .uf-h1{font-weight:600;font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.05;letter-spacing:normal;margin:8px 0 6px}
main .uf .uf-sub{font-size:.92rem;line-height:1.65;margin:0 0 22px;color:var(--muted)}
main .uf-article p,main .uf-article li{font-size:.92rem;line-height:1.75;color:var(--muted)}
main .uf-article .dropcap::first-letter{font-weight:400;font-size:3.6em;line-height:.85;padding:6px 10px 0 0}
main .uf-article blockquote{margin:22px 0;padding:6px 0 6px 18px;font-size:1.5rem;line-height:1.65}
main .uf-article .uf-sig{font-size:.92rem!important;line-height:1.65;color:var(--muted);margin-top:18px}
main .uf-article .uf-date{font-size:.8rem}
main .uf-article h2{font-size:1.35rem;font-weight:600}
/* ===== v13: Unfiltered list — cover picture on the right of each post ===== */
main .uf:not(.uf-article){max-width:900px}
.uf-item{display:flex;align-items:center;gap:clamp(16px,3vw,32px)}
.uf-item .uf-text{flex:1;min-width:0}
.uf-thumb{flex:none;width:clamp(120px,24vw,220px);aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line);transition:transform .2s}
.uf-item:hover .uf-thumb{transform:scale(1.03)}
@media(max-width:520px){.uf-item{flex-direction:column-reverse;align-items:stretch}.uf-thumb{width:100%;aspect-ratio:16/9}}

/* research map: wide on desktop, stacked on phones */
.rmap-tall{display:none}
@media (max-width:640px){.rmap-wide{display:none}.rmap-tall{display:block}}

/* ===== v11: brand-colored social tiles + handwritten footer name ===== */
.social.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,118px));gap:12px;justify-content:center;padding:22px 0 6px}
.social.tiles .tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 6px 11px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--card),var(--bg));box-shadow:0 6px 16px rgba(0,0,0,.07);color:var(--c);transition:transform .15s ease,box-shadow .15s ease}
.social.tiles .tile:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.12);text-decoration:none;color:var(--c)}
.social.tiles svg{width:30px;height:30px;fill:none}
.social.tiles span{font-family:Arial,Helvetica,sans-serif!important;font-size:.68rem;font-weight:700;letter-spacing:.09em;color:var(--c)}
.tile.t-mail{--c:var(--accent)}.tile.t-gs{--c:#4285F4}.tile.t-rg{--c:#00A396}.tile.t-li{--c:#0A66C2}.tile.t-orcid{--c:#A6CE39}
.tile.t-orcid span{color:#6E9A1F}
[data-theme=dark] .tile.t-li{--c:#5aa2ee}[data-theme=dark] .tile.t-gs{--c:#7aa9f7}[data-theme=dark] .tile.t-orcid span{color:#A6CE39}[data-theme=dark] .tile.t-rg{--c:#2fd0c2}
@media(max-width:640px){.social.tiles span{font-size:.6rem;letter-spacing:.04em}.social.tiles{grid-template-columns:repeat(3,minmax(0,1fr));max-width:380px;margin:0 auto}}
footer .fname{font-family:'Caveat',cursive!important;font-weight:600;font-size:1.7rem;line-height:1.1;color:var(--text);display:inline-block;margin-bottom:2px}

/* ===== v14: wider usable page width (like ahmadstatespace.github.io) ===== */
.wrap{max-width:1200px}
@media(min-width:1400px){.wrap{max-width:1280px}}
@media(min-width:1800px){.wrap{max-width:1360px}}
@media(min-width:961px){.profile{width:280px}}
main .uf:not(.uf-article){max-width:none}
main .uf-article{max-width:860px}
/* v15: +50 px wider */
.wrap{max-width:1250px}
@media(min-width:1400px){.wrap{max-width:1330px}}
@media(min-width:1800px){.wrap{max-width:1410px}}
/* v16: small social icons in the footer */
.fsocial{display:flex;gap:8px;justify-content:flex-end;margin-bottom:10px}
.fsocial .fs{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--c);transition:transform .15s ease,box-shadow .15s ease}
.fsocial .fs:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.12);text-decoration:none}
.fsocial svg{width:17px;height:17px;fill:none}
.fs.t-mail{--c:var(--accent)}.fs.t-gs{--c:#4285F4}.fs.t-rg{--c:#00A396}.fs.t-li{--c:#0A66C2}.fs.t-orcid{--c:#A6CE39}
[data-theme=dark] .fs.t-li{--c:#5aa2ee}[data-theme=dark] .fs.t-gs{--c:#7aa9f7}[data-theme=dark] .fs.t-rg{--c:#2fd0c2}
@media(max-width:520px){.fsocial{justify-content:center}}
@media(min-width:521px){footer .small{text-align:right}}
/* v17: Home social tiles under the photo/affiliations (smaller); footer icons bigger + centered */
.profile .social.tiles.mini{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:14px 0 0;max-width:none;margin:0}
.profile .social.tiles.mini .tile{padding:9px 2px 7px;gap:5px;border-radius:11px}
.profile .social.tiles.mini svg{width:22px;height:22px}
.profile .social.tiles.mini span{font-size:.5rem!important;letter-spacing:.02em}
.profile .social.tiles.mini .t-rg span{font-size:0!important}.profile .social.tiles.mini .t-rg span::after{content:"RG";font-size:.5rem;letter-spacing:.02em}
footer .foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:20px}
footer .foot>div:nth-child(2){text-align:center}
.fsocial{justify-content:center;margin:12px 0 0;gap:10px}
.fsocial .fs{width:40px;height:40px;border-radius:11px}
.fsocial svg{width:22px;height:22px}
@media(max-width:520px){footer .foot{grid-template-columns:1fr;text-align:center}}
@media(max-width:520px){.hero .profile .social.tiles.mini{max-width:340px;margin:0 auto}}
/* v18: collaboration callout inside the intro column */
.intro .callout{margin:26px 0 0;display:flow-root;overflow:hidden}
/* v19: hero as two columns — collaboration box bottom lines up with the social tiles */
@media(min-width:769px){
 .hero{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,3vw,40px);align-items:stretch}
 .hero::after{display:none}
 .hero .profile{float:none;grid-column:2;grid-row:1;margin:0}
 .hero .intro{grid-column:1;grid-row:1;display:flex;flex-direction:column}
 .hero .intro .callout{margin-top:auto;margin-bottom:0}
 .hero .intro .say:last-of-type{margin-bottom:26px}
}
/* ===== v20: "Open to collaborations" card (recruiting-card style) ===== */
:root{--sans:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif}
.opp{position:relative;display:flow-root;border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:24px;padding:22px 30px 24px;background:linear-gradient(120deg,var(--card) 0%,var(--bg) 100%);box-shadow:0 18px 40px rgba(0,0,0,.10)}
[data-theme=dark] .opp{box-shadow:0 18px 40px rgba(0,0,0,.35)}
.opp-label{font-family:var(--sans)!important;font-weight:700;font-size:.9rem;letter-spacing:.04em;color:var(--muted)}
.opp-h{font-family:var(--serif)!important;font-style:italic;font-weight:400!important;font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.15;margin:6px 0 8px;color:var(--text)}
.opp-text{margin:0 0 16px;font-size:1.05rem;line-height:1.55;color:var(--muted)}
.opp-btn{display:inline-block;font-family:var(--sans)!important;font-weight:700;font-size:.92rem;letter-spacing:.03em;padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.35);color:var(--text)}
[data-theme=dark] .opp-btn{background:rgba(255,255,255,.06)}
.opp-btn:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
.hero .intro .opp{margin-top:26px}
@media(min-width:769px){.hero .intro .opp{margin-top:auto}}
.opp-page{margin:0 0 10px}

/* ===== v20: editorial News & Updates (flexible cards, any number of links) ===== */
.news-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:64px 0 28px}
main h2.news-h{font-family:var(--serif)!important;font-style:italic;font-weight:400;font-size:clamp(2.4rem,5.5vw,3.8rem);line-height:1.05;margin:0;padding:0;border:0;color:var(--text)}
.news-sub{margin:6px 0 0;color:var(--muted)}
.news-all{font-family:var(--sans)!important;font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--muted);padding-bottom:6px;white-space:nowrap}
.news-all::after,.nlinks a::after{content:"  ↗";font-weight:700}
.news-all:hover,.nlinks a:hover{text-decoration:none;color:var(--accent)}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));column-gap:clamp(24px,3.5vw,46px)}
.nitem{border-top:2px solid var(--text);border-bottom:2px solid var(--text);padding:34px 0 30px;margin-bottom:40px;display:flex;flex-direction:column}
.nitem .ndate{font-family:var(--sans)!important;font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent2)}
.nitem .ntitle{font-family:var(--serif)!important;font-weight:400;font-size:clamp(1.6rem,2.6vw,2.05rem);line-height:1.15;margin:20px 0 16px}
.nitem .ntitle a{color:var(--text)}.nitem .ntitle a:hover{color:var(--accent);text-decoration:none}
.nitem p{font-family:var(--sans)!important;font-size:.98rem;line-height:1.65;color:var(--muted);margin:0 0 18px;max-width:36ch}
.nlinks{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.nlinks a{font-family:var(--sans)!important;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* v20b: compact card on Home so it lines up with the social tiles */
.hero .opp{padding:14px 26px 16px}
.hero .opp-h{font-size:clamp(1.5rem,2.6vw,1.95rem);margin:2px 0 6px}
.hero .opp-text{font-size:1rem;line-height:1.5;margin:0 0 12px}
.hero .opp-btn{padding:6px 16px;font-size:.88rem}
@media(min-width:769px){.hero .intro .say:last-of-type{margin-bottom:18px}}
@media(min-width:769px){.hero .profile{display:flex;flex-direction:column}.hero .profile .social.tiles.mini{margin-top:auto;padding-top:14px}}
/* ===== v21: fonts back to Palatino in collab card + news (sizes kept); Research Overview header; Bio sections ===== */
.opp-label,.opp-btn,.news-all,.nitem .ndate,.nitem p,.nlinks a{font-family:var(--serif)!important}
.opp-h,main h2.news-h{font-style:normal}
.nitem p{font-size:1.02rem}
.home-research{margin-top:10px}
.home-research>p{font-size:clamp(1.12rem,1.6vw,1.28rem);line-height:1.7;max-width:none}
.home-research .rfig{margin:6px 0 26px}
/* Bio */
.bio-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 8px;padding:12px 0;position:sticky;top:61px;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.bio-tabs a{padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:.92rem;color:var(--text);background:var(--card);white-space:nowrap}
.bio-tabs a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
@media(max-width:720px){.bio-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}}
h2.bio-h{scroll-margin-top:130px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;font-size:clamp(1.6rem,3.2vw,2.1rem)}
.bio-cap{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.appts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.appt{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:16px;background:linear-gradient(120deg,var(--card),var(--bg))}
.appt .logo{width:44px;height:44px}
.focus{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:22px}
.focus h3{margin:0 0 6px;color:var(--accent)}.focus p{margin:0}
.findme{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px 30px}
.kw{display:flex;flex-wrap:wrap;gap:8px}
.kw span{padding:5px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:.95rem}
/* ===== v22: hero text sized like Ahmad's intro; Research Overview text size; Bio sidebar ===== */
.lead{font-size:clamp(1.8rem,3.6vw,2.75rem);line-height:1.22;margin-bottom:30px}
.say{font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.32;margin-bottom:22px}
.home-research>p{font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.5}
.bio-top{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,3vw,40px);align-items:start}
.bio-side{border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:18px;padding:20px 20px 18px;background:linear-gradient(160deg,var(--card),var(--bg));box-shadow:0 12px 28px rgba(0,0,0,.10)}
.side-block{margin-bottom:16px}
.side-h{margin:0 0 8px;font-size:1.25rem;color:var(--accent)}
.bio-side p{margin:0 0 8px;font-size:.98rem;line-height:1.55}
.bio-side .social.tiles.mini{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:4px 0 0;margin:0}
.bio-side .social.tiles.mini .tile{padding:9px 2px 7px;gap:5px;border-radius:11px}
.bio-side .social.tiles.mini svg{width:22px;height:22px}
.bio-side .social.tiles.mini span{font-size:.5rem!important;letter-spacing:.02em}
.bio-side .social.tiles.mini .t-rg span{font-size:0!important}.bio-side .social.tiles.mini .t-rg span::after{content:"RG";font-size:.5rem}
@media(max-width:860px){.bio-top{grid-template-columns:1fr}}
@media(min-width:769px){
 .hero .profile>img{flex:1 1 auto;min-height:0;height:0;object-fit:cover;object-position:center top}
 .hero .profile .social.tiles.mini{margin-top:0}
}
@media(min-width:1100px){.hero .profile{width:320px}}
/* v23: Bio section headings in italic (the small caption stays upright) */
h2.bio-h{font-style:italic}
h2.bio-h .bio-cap{font-style:normal}
/* v24: Home News & Highlights — 8 items in 2 rows of 4 */
.news-grid.eight{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(18px,2.4vw,34px)}
.news-grid.eight .ntitle{font-size:clamp(1.3rem,1.8vw,1.6rem);margin:16px 0 12px}
.news-grid.eight .nitem{padding:26px 0 24px;margin-bottom:30px}
.news-grid.eight .nitem p{font-size:.95rem}
@media(max-width:1100px){.news-grid.eight{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.news-grid.eight{grid-template-columns:1fr}}
/* v25: Bio sidebar headings in the same italic style as the section headings */
.bio-side .side-h{font-style:italic;font-weight:400;font-size:clamp(1.6rem,2.4vw,2rem);line-height:1.15;color:var(--accent);margin:0 0 10px}
/* v26: single line between news rows + full-width fading divider */
.news-grid .nitem{border-bottom:0;margin-bottom:0}
.news-grid.eight{margin-bottom:10px}
.news-grid.eight .nitem{margin-bottom:0}
.news-grid.eight .nitem:nth-last-child(-n+4){border-bottom:2px solid var(--text)}
@media(max-width:1100px){.news-grid.eight .nitem:nth-last-child(-n+4){border-bottom:0}.news-grid.eight .nitem:nth-last-child(-n+2){border-bottom:2px solid var(--text)}}
@media(max-width:560px){.news-grid.eight .nitem:nth-last-child(-n+2){border-bottom:0}.news-grid.eight .nitem:last-child{border-bottom:2px solid var(--text)}}
html,body{overflow-x:clip}
.fade-rule{border:0;height:2px;width:100vw;margin:70px 0 0 calc(50% - 50vw);background:linear-gradient(90deg,transparent 0%,var(--accent) 22%,var(--accent) 78%,transparent 100%);opacity:.9}
.fade-rule+.news-head{margin-top:48px}
.fade-rule+.home-research{margin-top:0}
.fade-rule+.home-research .news-head{margin-top:48px}
.fade-rule+h2{margin-top:48px}
.fade-rule{height:1px;opacity:.85}
/* v27: Bio dividers — same fading style as the Home dividers, kept at content width */
h2.bio-h,.bio-tabs{border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent 0%,var(--accent) 22%,var(--accent) 78%,transparent 100%) 1;border-image-width:0 0 1px 0}
/* v28: Bio dividers a touch finer (lighter line; hairline on high-res screens) */
h2.bio-h,.bio-tabs{border-image:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--accent) 55%,transparent) 22%,color-mix(in srgb,var(--accent) 55%,transparent) 78%,transparent 100%) 1;border-image-width:0 0 1px 0}
@media(min-resolution:2dppx){h2.bio-h,.bio-tabs{border-image-width:0 0 .75px 0}}
/* v29: one divider style everywhere (same as Bio): fine green line fading at both ends */
:root{--fade-line:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--accent) 55%,transparent) 22%,color-mix(in srgb,var(--accent) 55%,transparent) 78%,transparent 100%)}
main h2:not(.news-h),.pub{border-bottom:1px solid transparent;border-image:var(--fade-line) 1;border-image-width:0 0 1px 0}
.uf-item{border-top:1px solid transparent;border-image:var(--fade-line) 1;border-image-width:1px 0 0 0}
.fade-rule{background:var(--fade-line);opacity:1;height:1px}
@media(min-resolution:2dppx){main h2:not(.news-h),.pub{border-image-width:0 0 .75px 0}.uf-item{border-image-width:.75px 0 0 0}.fade-rule{height:.75px}}
/* conference authors */
.timeline .authors{font-size:.95rem;color:var(--muted);margin:2px 0}
.timeline .authors b{color:var(--text);text-decoration:underline;text-underline-offset:3px}
/* v30: fading divider between years in Conference Papers & Talks */
#talks ~ .year ~ .year{border-top:1px solid transparent;border-image:var(--fade-line) 1;border-image-width:1px 0 0 0;padding-top:22px;margin-top:30px}
@media(min-resolution:2dppx){#talks ~ .year ~ .year{border-image-width:.75px 0 0 0}}
/* v31: "Full text" request button next to DOI, smiley follows light/dark mode */
.links .ft{display:inline-flex;align-items:center;gap:6px;position:relative;border-color:var(--accent);color:var(--accent)}
.links .ft svg{width:15px;height:15px}
.links .ft:hover{background:var(--accent);color:var(--bg)}
.links .ft::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);white-space:nowrap;font-size:.85rem;letter-spacing:0;text-transform:none;padding:7px 12px;border-radius:10px;background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:20}
.links .ft:hover::after,.links .ft:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){.links .ft::after{left:0;transform:none;white-space:normal;width:230px}.links .ft:hover::after{transform:none}}
/* ===== v32: footer always at the bottom of the screen + new footer layout ===== */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1 0 auto;width:100%}
body>header,body>footer{flex-shrink:0}
footer .foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:20px}
footer .f-mid{text-align:center}
footer .f-mid .fsocial{margin:4px 0 0}
footer .f-mail{margin-top:8px}
footer .f-left .small{margin-top:8px;text-align:left!important;align-self:auto}
@media(max-width:720px){footer .foot{grid-template-columns:1fr;text-align:center}footer .f-left .small{text-align:center!important}footer .f-mid{order:-1}footer .f-right{display:none}}
/* ===== v32: Contact page ===== */
.c-mail{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px;margin:6px 0 10px}
.mailcard{position:relative;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:18px;padding:20px 22px;background:linear-gradient(120deg,var(--card),var(--bg));box-shadow:0 12px 28px rgba(0,0,0,.10)}
.mc-label{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mc-addr{display:block;font-size:clamp(1.25rem,2.4vw,1.7rem);margin:6px 0 12px;word-break:break-word}
.copy{font:inherit;font-size:.85rem;padding:5px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer}
.copy:hover{border-color:var(--accent);color:var(--accent)}
h2.c-h{font-style:italic;font-weight:400;font-size:clamp(1.6rem,3.2vw,2.1rem)}
.c-note{color:var(--muted);margin:-4px 0 14px}
.whys{display:flex;flex-wrap:wrap;gap:10px}
.why{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);transition:transform .15s,border-color .15s}
.why:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent);text-decoration:none}
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
.place{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.place .logo{width:44px;height:44px}
.c-tip{margin:26px 0 6px;color:var(--muted)}
.c-sign{font-style:italic;font-size:1.5rem;color:var(--accent);margin:14px 0 4px}
/* v33: © under the footer icons; contact sign-off uses the footer signature */
footer .f-mid .small{margin-top:10px;text-align:center!important;align-self:auto}
.c-sign .sig{font-family:'Caveat',cursive!important;font-weight:600;font-size:2.2rem;font-style:normal;line-height:1.1;color:var(--text)}
.c-mail{grid-template-columns:minmax(0,560px)}
/* v34: lighter-looking text (Palatino has no thin weight, so: no fake bolding, finer rendering, softer ink) */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis-weight:none}
.hero .lead,.hero .say,.home-research>p{font-weight:400;color:color-mix(in srgb,var(--text) 86%,var(--bg))}
[data-theme=dark] .hero .lead,[data-theme=dark] .hero .say,[data-theme=dark] .home-research>p{color:color-mix(in srgb,var(--text) 80%,var(--bg))}
/* v35: bigger Bio intro text; italic Home statement line */
.bio-intro p{font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.62}
.hero .lead{font-style:italic}
/* v36: wind-and-tower illustration on the collaboration card */
.opp{position:relative}
.opp-art{position:absolute;right:clamp(14px,2.2vw,30px);top:50%;transform:translateY(-50%);width:clamp(96px,10vw,130px);height:auto;color:var(--accent);opacity:.9;pointer-events:none}
.hero .opp{padding-right:clamp(130px,13vw,175px)}
.opp-art .gust path{stroke-dasharray:6 7;animation:gust 2.8s linear infinite}
.opp-art .gust path:nth-child(2){animation-duration:2.2s}
.opp-art .gust path:nth-child(3){animation-duration:3.4s}
@keyframes gust{to{stroke-dashoffset:-26}}
.opp-art .tower{transform-origin:106px 112px;animation:sway 4s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(1.6deg)}}
@media(prefers-reduced-motion:reduce){.opp-art .gust path,.opp-art .tower{animation:none}}
@media(max-width:560px){.hero .opp{padding-right:26px;padding-top:86px}.opp-art{top:14px;right:16px;transform:none;width:84px}}
.opp-art{width:clamp(110px,12vw,150px)}.hero .opp{padding-right:clamp(140px,14vw,190px)}@media(max-width:560px){.opp-art{width:96px}}
/* v37: creativity icon (glowing lightbulb with a wind-swirl filament and twinkling sparks) */
.opp-art.idea .tower,.opp-art.idea .gust{display:none}
.opp-art.idea .glow{opacity:.12;transform-origin:70px 58px;animation:glow 3.2s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.08;transform:scale(.92)}50%{opacity:.22;transform:scale(1.06)}}
.opp-art.idea .rays{animation:rays 3.2s ease-in-out infinite}
@keyframes rays{0%,100%{opacity:.45}50%{opacity:1}}
.opp-art.idea .stars path{transform-box:fill-box;transform-origin:center;animation:twinkle 2.4s ease-in-out infinite}
.opp-art.idea .stars .s2{animation-delay:.8s}.opp-art.idea .stars .s3{animation-delay:1.6s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.opp-art.idea *{animation:none!important}}
@media(max-width:560px){.hero .opp{padding-right:26px;padding-top:100px}.opp-art{top:12px;right:16px;transform:none;width:84px}}
/* ===== v38 (site_V6): Ahmad-style airy hero, big photo, logos after the statement line ===== */
@media(min-width:769px){
 .hero{grid-template-columns:minmax(0,1fr) clamp(300px,38vw,560px);column-gap:clamp(48px,7vw,120px);align-items:start}
 .hero .profile{display:block;width:auto;margin:0;align-self:start}
 .hero .profile>img{flex:none;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:34px}
}
@media(min-width:1100px){.hero .profile{width:auto}}
.hero .hey{margin-bottom:28px}
.hero .lead{margin-bottom:48px}
.hero .say{margin-bottom:32px}
.hero .intro .opp{margin-top:44px!important}
.lead-logos{display:inline-flex;gap:.3em;margin-left:.35em;vertical-align:-.12em;white-space:nowrap}
.lead-logos img{height:.95em;width:auto;border-radius:.2em;background:#fff;box-shadow:0 0 0 1px var(--line)}
@media(max-width:768px){.hero .profile{width:100%;margin:0 0 26px}.hero .profile>img{width:min(100%,360px);display:block;margin:0 auto;aspect-ratio:4/5;object-fit:cover;border-radius:28px;height:auto}}
/* v39: more room after the fading dividers; footer icons + © on the right */
.fade-rule+.news-head,.fade-rule+.home-research .news-head,.fade-rule+h2{margin-top:clamp(64px,7vw,96px)}
footer .f-right{display:none}
@media(min-width:721px){
 footer .foot{grid-template-columns:1fr auto}
 footer .f-mid{grid-column:2;justify-self:end;text-align:right}
 footer .f-mid .fsocial{justify-content:flex-end}
 footer .f-mid .small{text-align:right!important}
}
/* v40: icons right, © centered */
@media(min-width:721px){
 footer .foot{grid-template-columns:1fr auto 1fr}
 footer .f-mid{display:contents}
 footer .f-mid .fsocial{grid-column:3;grid-row:1;justify-self:end;align-self:start;margin-top:12px}
 footer .f-mid .small{grid-column:2;grid-row:1;align-self:end;text-align:center!important;margin:0}
}
/* v41: footer icons at the size of the old hero tiles */
.fsocial{gap:9px}
.fsocial .fs{width:58px;height:58px;border-radius:13px;box-shadow:0 6px 16px rgba(0,0,0,.07)}
.fsocial svg{width:28px;height:28px}
@media(max-width:400px){.fsocial{gap:7px}.fsocial .fs{width:52px;height:52px}.fsocial svg{width:25px;height:25px}}
/* v42: bigger labeled footer tiles */
.fsocial{gap:10px}
.fsocial .fs{width:88px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:14px}
.fsocial svg{width:30px;height:30px}
.fsocial .fs span{font-family:Arial,Helvetica,sans-serif!important;font-size:.58rem;font-weight:700;letter-spacing:.05em;color:var(--c);line-height:1}
@media(max-width:520px){.fsocial{gap:6px;flex-wrap:nowrap}.fsocial .fs{width:calc((100vw - 64px)/5);max-width:80px;height:66px;gap:5px}.fsocial svg{width:24px;height:24px}.fsocial .fs span{font-size:.45rem;letter-spacing:.01em}}
.fsocial .fs{width:96px}
@media(max-width:520px){.fsocial .fs{width:calc((100vw - 64px)/5)}.fsocial .fs.t-rg span{font-size:0!important}.fsocial .fs.t-rg span::after{content:"RG";font-size:.45rem}}
/* stack footer (centered) below 1100px so the big tiles never squeeze */
@media(max-width:1100px){
 footer .foot{grid-template-columns:1fr!important;text-align:center}
 footer .f-mid{display:block!important;order:-1}
 footer .f-mid .fsocial{justify-content:center!important;margin-top:4px}
 footer .f-mid .small{margin-top:10px!important;text-align:center!important}
 footer .f-right{display:none}
}
@media(max-width:1100px){footer .foot>*,footer .f-mid>*{grid-column:auto!important;grid-row:auto!important}footer .foot{display:flex!important;flex-direction:column;align-items:center}footer .f-left{order:1}}
/* v43: animated site logo next to the name (Tower in the Storm) */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand .logo{width:34px;height:34px;flex:none;border-radius:9px;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)}
.logo .lg-f{stroke-dasharray:40 9;animation:lgf 1.4s linear infinite}
.logo .lg-t{transform-box:view-box;transform-origin:47px 54px;animation:lgv .9s ease-in-out infinite}
@keyframes lgf{to{stroke-dashoffset:-49}}
@keyframes lgv{0%,100%{transform:rotate(-1.5deg)}20%{transform:rotate(6deg)}35%{transform:rotate(2deg)}50%{transform:rotate(7.5deg)}65%{transform:rotate(1deg)}80%{transform:rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.logo .lg-f,.logo .lg-t{animation:none}}
@media(max-width:400px){.brand .logo{width:28px;height:28px}.brand{gap:8px}}
.brand{gap:0;white-space:pre}.brand .logo{margin-right:10px}
@media(max-width:400px){.brand .logo{margin-right:8px}}
/* v44: Vortex Street logo, colors follow the site theme */
.logo .lg-bg{fill:#0f2a1c}.logo .lg-fg{stroke:#8fdc9f}.logo .lg-tw{fill:#b5ebbf}
:root:not([data-theme=dark]) .logo .lg-bg{fill:#d6ecdb}:root:not([data-theme=dark]) .logo .lg-fg{stroke:#1b5e3a}:root:not([data-theme=dark]) .logo .lg-tw{fill:#2e7d4f}
.logo .lg-v{opacity:0;animation:lgmv 4s linear infinite}
.logo .lg-s{animation:lgsp 1.1s linear infinite}
.logo .lg-fl{stroke-dasharray:7 5;animation:lgfl .6s linear infinite}
@keyframes lgmv{0%{transform:translate(25px,0) scale(.25);opacity:0}12%{opacity:1}75%{opacity:1}100%{transform:translate(62px,0) scale(1);opacity:0}}
@keyframes lgsp{to{transform:rotate(360deg)}}
@keyframes lgfl{to{stroke-dashoffset:-12}}
@media(prefers-reduced-motion:reduce){.logo .lg-v{opacity:1;animation:none}.logo .lg-s,.logo .lg-fl{animation:none}}
/* bigger top bar */
.nav{height:76px}
.menu{top:76px}
.brand{font-size:1.3rem}
.brand .logo{width:46px;height:46px;border-radius:12px;margin-right:12px}
#theme-toggle{font-size:1.55rem}
@media(min-width:1101px){.menu{gap:clamp(12px,1.2vw,22px)}.menu a{font-size:clamp(.98rem,.6rem + .5vw,1.14rem)}}
@media(max-width:1100px){.menu{top:76px}.menu a{font-size:1.15rem}}
@media(max-width:400px){.nav{height:66px}.menu{top:66px}.brand{font-size:1.12rem}.brand .logo{width:38px;height:38px;margin-right:9px}}
/* v45: wide logo only (no name) + tabs spread out */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.brand .logo{width:80px;height:46px;margin-right:0;border-radius:11px}
.logo .lg-v{animation:lgmv2 6s linear infinite}
@keyframes lgmv2{0%{transform:translate(31px,0) scale(.25);opacity:0}10%{opacity:1}80%{opacity:1}100%{transform:translate(110px,0) scale(1.05);opacity:0}}
@media(min-width:1101px){.nav-right{flex:1;justify-content:flex-end;gap:clamp(20px,2.4vw,40px)}.menu{flex:1;justify-content:space-between;max-width:1080px;margin-left:auto;gap:clamp(18px,2vw,34px)}}
@media(max-width:400px){.brand .logo{width:66px;height:38px}}
/* v46: optional journal / conference logos (drop files in assets/img/venues/) */
.vlogo{height:28px;width:auto;max-width:110px;object-fit:contain;vertical-align:middle;margin-right:10px;padding:3px 6px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.venue.has-logo,.cvenue.has-logo{display:flex;align-items:center;flex-wrap:wrap;margin-top:4px}
.cvenue.has-logo{margin-top:6px}
/* v47: "Bulb Inside" hover — lift + tile lights from within + breathing glow (footer + Bio tiles) */
.fsocial .fs,.tiles .tile{position:relative;transition:transform .25s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease}
.fsocial .fs svg,.tiles .tile svg{transition:filter .3s ease}
.fsocial .fs:hover,.fsocial .fs:focus-visible,.tiles .tile:hover,.tiles .tile:focus-visible{transform:translateY(-6px);text-decoration:none;color:var(--c);background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 38%,var(--card)) 0%,var(--card) 72%);border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 0 26px 4px color-mix(in srgb,var(--c) 40%,transparent),0 12px 22px rgba(0,0,0,.3);animation:bulb 2.2s ease-in-out infinite}
:root:not([data-theme=dark]) .fsocial .fs:hover,:root:not([data-theme=dark]) .fsocial .fs:focus-visible,:root:not([data-theme=dark]) .tiles .tile:hover,:root:not([data-theme=dark]) .tiles .tile:focus-visible{background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 30%,#fff) 0%,var(--card) 72%)}
.fsocial .fs:hover svg,.fsocial .fs:focus-visible svg,.tiles .tile:hover svg,.tiles .tile:focus-visible svg{filter:drop-shadow(0 0 8px var(--c))}
.tiles.mini .tile:hover,.tiles.mini .tile:focus-visible{transform:translateY(-4px)}
@keyframes bulb{0%,100%{box-shadow:0 0 22px 3px color-mix(in srgb,var(--c) 35%,transparent),0 12px 22px rgba(0,0,0,.3)}50%{box-shadow:0 0 34px 7px color-mix(in srgb,var(--c) 50%,transparent),0 12px 22px rgba(0,0,0,.3)}}
@media(prefers-reduced-motion:reduce){.fsocial .fs:hover,.tiles .tile:hover{animation:none;transform:none}}
/* v48: clickable CPP / FIU logos in the Home lead line, same "Bulb Inside" hover */
.lead-logos .ll{display:inline-flex;border-radius:.22em;line-height:0;transition:transform .25s ease,box-shadow .3s ease}
.ll-cpp{--c:#8fdc9f}.ll-fiu{--c:#f2c14e}
:root:not([data-theme=dark]) .ll-cpp{--c:#1b5e3a}:root:not([data-theme=dark]) .ll-fiu{--c:#b8860b}
.lead-logos .ll img{transition:filter .3s ease,box-shadow .3s ease}
.lead-logos .ll:hover,.lead-logos .ll:focus-visible{transform:translateY(-.18em);text-decoration:none;box-shadow:0 0 16px 3px color-mix(in srgb,var(--c) 45%,transparent),0 8px 14px rgba(0,0,0,.28);animation:bulbS 2.2s ease-in-out infinite}
.lead-logos .ll:hover img,.lead-logos .ll:focus-visible img{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent);filter:brightness(1.12) drop-shadow(0 0 5px color-mix(in srgb,var(--c) 70%,transparent))}
@keyframes bulbS{0%,100%{box-shadow:0 0 12px 2px color-mix(in srgb,var(--c) 38%,transparent),0 8px 14px rgba(0,0,0,.28)}50%{box-shadow:0 0 22px 5px color-mix(in srgb,var(--c) 55%,transparent),0 8px 14px rgba(0,0,0,.28)}}
@media(prefers-reduced-motion:reduce){.lead-logos .ll:hover{animation:none;transform:none}}
/* v49: top-bar tabs — "Wind Streaks" hover */
.menu a{position:relative;transition:transform .3s ease,color .25s ease}
.menu a::before,.menu a::after{content:"";position:absolute;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent));opacity:0;pointer-events:none}
.menu a::before{top:35%;left:-40%;width:45%}
.menu a::after{top:70%;left:-30%;width:35%}
.menu a:hover,.menu a:focus-visible{color:var(--accent2);text-decoration:none;transform:translateX(2px)}
.menu a:hover::before,.menu a:focus-visible::before{animation:streak .7s ease-out}
.menu a:hover::after,.menu a:focus-visible::after{animation:streak .7s .12s ease-out}
@keyframes streak{0%{opacity:0;transform:translateX(0)}30%{opacity:.9}100%{opacity:0;transform:translateX(260%)}}
@media(prefers-reduced-motion:reduce){.menu a:hover::before,.menu a:hover::after{animation:none}.menu a:hover{transform:none}}
/* v50: Wind Streaks loop continuously while hovering (3 staggered streaks) */
.menu a .st{position:absolute;top:52%;left:-50%;width:30%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent));opacity:0;pointer-events:none}
.menu a:hover::before,.menu a:focus-visible::before{animation:streak .9s ease-out infinite}
.menu a:hover::after,.menu a:focus-visible::after{animation:streak .9s .3s ease-out infinite}
.menu a:hover .st,.menu a:focus-visible .st{animation:streak .9s .6s ease-out infinite}
@media(prefers-reduced-motion:reduce){.menu a:hover .st{animation:none}}
/* v51: logo hover card (von Kármán vortex street) — text lives in assets/script.js */
.nav{position:relative}
.kcard{position:absolute;top:calc(100% - 4px);left:0;width:min(420px,88vw);background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:14px;padding:16px 18px 6px;box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 24px color-mix(in srgb,var(--accent) 18%,transparent);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .25s,visibility .25s;pointer-events:none;z-index:50;font-family:var(--serif);color:var(--text);text-align:left;font-size:.95rem;line-height:1.5;font-weight:400;white-space:normal}
.kcard::before{content:"";position:absolute;top:-7px;left:34px;width:12px;height:12px;background:var(--card);border-left:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-top:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));transform:rotate(45deg)}
@media(hover:hover){.brand:hover+.kcard,.brand:focus-visible+.kcard{opacity:1;visibility:visible;transform:none;transition-delay:.15s}}
.kc-h{font-family:var(--title);font-weight:700;font-size:1.15rem}.kc-h span{color:var(--muted);font-weight:400}
.kc-t{color:var(--accent);font-style:italic;margin:4px 0 6px}
.kcard p{margin:0 0 10px;color:color-mix(in srgb,var(--text) 85%,var(--bg))}
.kc-fig{margin:10px 0 4px}
.kc-fig .kbig{display:block;width:100%;height:auto;aspect-ratio:112/64;border-radius:12px;background:transparent!important;box-shadow:none!important;margin:0}
.kc-fig{margin:0 0 6px}.kcard{padding-top:14px}
/* v52: "what's this?" hint under the logo (hidden after the first hover) */
.khint{position:absolute;left:calc(clamp(14px,4vw,28px) + 16px);top:calc(100% + 4px);display:flex;align-items:center;gap:4px;font-family:'Caveat',cursive;font-size:1.4rem;line-height:1;color:var(--accent);white-space:nowrap;pointer-events:none;z-index:40;animation:khbob 2.4s ease-in-out infinite;transition:opacity .4s}
.khint svg{width:26px;height:18px}
.khint.gone{opacity:0}
@keyframes khbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:1100px){.khint{display:none}}
@media(prefers-reduced-motion:reduce){.khint{animation:none}}
/* v53: hint always shown (every page load, every screen size); tap it to open the card on touch screens */
.khint{background:none;border:0;padding:0;cursor:pointer;pointer-events:auto;display:flex!important}
.khint:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.kcard.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nav:has(.brand:hover) .khint,.nav:has(.kcard.open) .khint{opacity:0}
header:has(.menu.open) .khint{display:none!important}
@media(max-width:1100px){.khint{font-size:1.25rem}}
@media(max-width:400px){.khint{left:calc(clamp(14px,4vw,28px) + 10px);font-size:1.15rem}.khint svg{width:22px;height:15px}}
@media(max-width:600px){.kcard{left:8px;width:calc(100vw - 16px)}}
/* v54: hint in the site's text font, a bit larger; Home page only (see script.js) */
.khint{font-family:var(--serif)!important;font-style:normal;font-size:1.5rem}
@media(max-width:1100px){.khint{font-size:1.35rem}}
@media(max-width:400px){.khint{font-size:1.25rem}}
/* v55: hint back in the handwritten Caveat font, a tad bigger; fades once the card is seen */
.khint{font-family:'Caveat',cursive!important;font-weight:600;font-size:1.6rem}
@media(max-width:1100px){.khint{font-size:1.45rem}}
@media(max-width:400px){.khint{font-size:1.35rem}}
.khint.gone{opacity:0!important;transition:opacity .4s}
.khint.hidden{display:none!important}
.khint.away{opacity:0!important;pointer-events:none;transition:opacity .3s}
/* v56: real CPP / FIU logos */
.lead-logos img[src*="fiu.png"]{padding:.06em .1em;box-sizing:content-box}
img.logo[src*="fiu.png"]{padding:3px;box-sizing:border-box}
/* v57: CPP and FIU logos identical size in the Home intro line */
.lead-logos img,.lead-logos img[src*="fiu.png"]{width:2.1em;height:1em;object-fit:contain;padding:.1em .14em;box-sizing:border-box;background:#fff}
.lead-logos img[src*="cpp"]{object-fit:cover;padding:0;background:#004b87}
/* v58: CPP / WOW EF text links in the Home intro line */
.lead a.lead-org{color:var(--accent);text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-repeat:no-repeat;background-position:0 92%;transition:color .25s,text-shadow .3s,background-size .3s}
.lead a.lead-org:hover,.lead a.lead-org:focus-visible{color:var(--accent2);text-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent)}
/* v59: Home intro line upright (not italic) */
.hero .lead,.lead{font-style:normal}
/* v60: intro line styled like Ahmad's — plain Palatino, full text colour, tighter lines; links look like normal text until hovered */
.hero .lead{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--text);line-height:1.2;letter-spacing:0}
.lead a.lead-org{color:inherit;background-image:none;text-shadow:none}
.lead a.lead-org:hover,.lead a.lead-org:focus-visible{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em;text-shadow:none}
[data-theme] .hero .lead{color:var(--text)}
/* v61: intro line size matched to Ahmad (~63px on a 1440px screen) */
.hero .lead{font-size:clamp(1.9rem,4.4vw,3.95rem);line-height:1.15}
/* v62: more room under "Hey, I’m Mohamad" */
.hero h1.hey{margin-bottom:clamp(30px,4vw,56px)}
/* v63: intro line back to a proportional size (Ahmad ratio: intro ≈ 0.7 × heading) */
.hero .lead{font-size:clamp(1.45rem,2.8vw,2.45rem);line-height:1.22}
/* v64: CPP / Wall of Wind links in the intro get the same continuous "Wind Streaks" hover as the top tabs */
.lead a.lead-org{position:relative;display:inline-block;transition:transform .3s ease,color .25s ease}
.lead a.lead-org::before,.lead a.lead-org::after,.lead a.lead-org .st{content:"";position:absolute;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent));opacity:0;pointer-events:none}
.lead a.lead-org::before{top:35%;left:-40%;width:45%}
.lead a.lead-org::after{top:70%;left:-30%;width:35%}
.lead a.lead-org .st{top:52%;left:-50%;width:30%}
.lead a.lead-org:hover,.lead a.lead-org:focus-visible{color:var(--accent2);text-decoration:none;transform:translateX(2px)}
.lead a.lead-org:hover::before,.lead a.lead-org:focus-visible::before{animation:streak .9s ease-out infinite}
.lead a.lead-org:hover::after,.lead a.lead-org:focus-visible::after{animation:streak .9s .3s ease-out infinite}
.lead a.lead-org:hover .st,.lead a.lead-org:focus-visible .st{animation:streak .9s .6s ease-out infinite}
@media(prefers-reduced-motion:reduce){.lead a.lead-org:hover::before,.lead a.lead-org:hover::after,.lead a.lead-org:hover .st{animation:none}.lead a.lead-org:hover{transform:none}}
/* v65: small-caps name note under "Hey, I'm Mohamad" */
.hero h1.hey{margin-bottom:10px}
.hero .aka{font-family:var(--serif);font-variant:small-caps;font-size:clamp(.92rem,1.1vw,1.05rem);letter-spacing:.05em;color:var(--muted);margin:0 0 clamp(30px,4vw,56px);line-height:1.4}
.hero .aka{letter-spacing:.03em;text-wrap:pretty}
.hero .aka{font-style:italic;font-variant-caps:small-caps;font-feature-settings:"smcp" 1}
.hero .aka{font-variant:normal;font-variant-caps:normal;font-feature-settings:normal;text-transform:none;letter-spacing:0;font-size:clamp(.95rem,1.15vw,1.1rem)}
/* v66: smaller hero paragraphs */
.hero .say{font-size:clamp(1.05rem,1.45vw,1.4rem);line-height:1.5}
.hero .say em{font-style:italic}
/* v67: hero paragraphs at 23px (18px on phones) */
.hero .say{font-size:23px}
@media(max-width:600px){.hero .say{font-size:18px}}
/* v68: same continuous Wind Streaks hover for "unfiltered thoughts" / "off-the-clock" links */
a.gust{position:relative;display:inline-block;transition:transform .3s ease,color .25s ease}
a.gust::before,a.gust::after,a.gust .st{content:"";position:absolute;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent));opacity:0;pointer-events:none}
a.gust::before{top:35%;left:-40%;width:45%}
a.gust::after{top:70%;left:-30%;width:35%}
a.gust .st{top:52%;left:-50%;width:30%}
a.gust:hover,a.gust:focus-visible{color:var(--accent2);transform:translateX(2px)}
a.gust:hover::before,a.gust:focus-visible::before{animation:streak .9s ease-out infinite}
a.gust:hover::after,a.gust:focus-visible::after{animation:streak .9s .3s ease-out infinite}
a.gust:hover .st,a.gust:focus-visible .st{animation:streak .9s .6s ease-out infinite}
@media(prefers-reduced-motion:reduce){a.gust:hover::before,a.gust:hover::after,a.gust:hover .st{animation:none}a.gust:hover{transform:none}}
/* v69: hover caption card on the Home photo → IBHS highlight post */
.hero .profile{position:relative}
.pcap{position:absolute;left:50%;bottom:16px;transform:translate(-50%,8px);width:min(calc(100% - 32px),420px);box-sizing:border-box;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 12px 28px rgba(0,0,0,.35);color:var(--text);font-family:var(--serif);font-size:1rem;line-height:1.4;text-align:center;text-decoration:none;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s}
.pcap .pcap-l{color:var(--accent);white-space:nowrap}
.pcap:hover .pcap-l,.pcap:focus-visible .pcap-l{text-decoration:underline;text-underline-offset:.15em}
.hero .profile:hover .pcap,.pcap:focus-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(hover:none){.pcap{position:static;transform:none;opacity:1;visibility:visible;margin:12px auto 0;display:block;background:var(--card);backdrop-filter:none}}
/* v70: post cover photos keep faces in frame */
.uf-hero img{object-position:center 22%}
.uf-hero.full img{max-height:none;height:auto;object-fit:contain}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:900px){.cards.three{grid-template-columns:1fr}}
.cards.three .card .body h3{margin:0;line-height:1.45}.cards.three .card{display:flex}.cards.three .card .body{display:flex;align-items:center}
/* v71: Areas of interest as points */
.interest-list{list-style:none;margin:6px 0 34px;padding:0}
.interest-list li{position:relative;padding:10px 0 10px 30px;font-size:1.15rem;line-height:1.55;color:var(--text)}
.interest-list li::before{content:"";position:absolute;left:4px;top:1.15em;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.collab-page h2{font-style:italic}
/* v72: section subheaders on every page except Home (and the Unfiltered pages, which keep their own style) match the Bio page's "Where I Trained" */
body:not(.home):not(.uf-page) main h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.6rem,3.2vw,2.1rem);color:var(--accent);letter-spacing:0;text-transform:none}
.collab-who{font-size:1.15rem;line-height:1.55;margin:6px 0 34px}
.bio-intro a.gust{display:inline}
.bio-side a.gust{display:inline-block}
.focus .teach-kw{max-width:300px}
/* v73: clickable Bio logos — same "Bulb Inside" hover as the Home lead logos */
a.lg{display:inline-flex;flex:none;align-self:flex-start;border-radius:8px;line-height:0;--c:#8fdc9f;transition:transform .25s ease,box-shadow .3s ease}
:root:not([data-theme=dark]) a.lg{--c:#1b5e3a}
a.lg img{transition:filter .3s ease,box-shadow .3s ease}
a.lg:hover,a.lg:focus-visible{transform:translateY(-3px);text-decoration:none;box-shadow:0 0 16px 3px color-mix(in srgb,var(--c) 45%,transparent),0 8px 14px rgba(0,0,0,.28);animation:bulbS 2.2s ease-in-out infinite}
a.lg:hover img,a.lg:focus-visible img{filter:brightness(1.12) drop-shadow(0 0 5px color-mix(in srgb,var(--c) 70%,transparent))}
@media(prefers-reduced-motion:reduce){a.lg:hover{animation:none;transform:none}}

/* v-bio-2026-10-13: toolbox spacing, italic orgs, outro */
.toolbox p{margin:0 0 1.15em}
.toolbox p:last-child{margin-bottom:0}
main .timeline em,main .appt em{font-style:italic}
.bio-outro{margin-top:2.2em;font-size:1.15rem}
.bio-outro a.gust{display:inline}

/* v-identity-2026-10-13 */
.id-lead{font-size:clamp(1.42rem,2.5vw,2rem);line-height:1.45;margin:8px 0 10px;color:var(--text)}
.id-story p{font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.6;margin:0 0 1em;color:var(--text)}
.id-story a.gust{display:inline}
.flag{display:inline-block;width:1.25em;height:.84em;vertical-align:-.08em;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.id-disclaimer{font-size:clamp(1rem,1.4vw,1.15rem);margin:2em 0 .5em;color:var(--muted)}
.id-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin:6px 0 10px}
.val{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;padding:18px 20px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.val h3{margin:0 0 6px;font-style:italic;font-weight:400;font-size:1.3rem;color:var(--accent)}
.val p{margin:0;font-size:1rem;line-height:1.5}
.id-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:6px 0 10px}
.fact{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 14px;border:1px solid var(--line);border-radius:16px;transition:transform .3s ease,box-shadow .3s ease}
.fact svg{width:52px;height:52px;color:var(--accent)}
.fact b{font-size:1.25rem}
.fact span{font-size:.92rem;color:var(--muted);line-height:1.35}
.fact:hover{transform:translateY(-4px);box-shadow:0 10px 26px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
@media(prefers-reduced-motion:reduce){.fact:hover{transform:none}}
.id-books{list-style:none;padding:0;margin:6px 0 10px}
.id-books li{padding:12px 0;border-bottom:1px solid var(--line);font-size:1.15rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.id-books .bk-a{color:var(--muted);font-size:1rem}
.id-books .bk-buy{margin-left:auto;font-size:.95rem;color:var(--accent)}
.ayahs{display:grid;gap:22px;margin:14px 0 10px}
.ayah{margin:0;padding:24px 26px;border-radius:16px;border:1px solid var(--line);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.ayah .ar{font-family:"Amiri","Traditional Arabic","Scheherazade New","Noto Naskh Arabic","Arabic Typesetting",serif;font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:2;text-align:center;margin:0 0 12px;color:var(--text)}
.ayah blockquote{margin:0 0 8px;font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.55;text-align:center}
.ayah figcaption{text-align:center;font-size:.9rem;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
.ayah .meaning{margin:0;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6;border-top:1px solid var(--line);padding-top:12px}

/* v-identity-2: disclaimer like paragraphs, compact values, animated glowing facts */
.id-disclaimer{font-size:clamp(1.15rem,1.8vw,1.45rem);color:var(--text);margin:1.6em 0 .5em}
.val{display:flex;align-items:center;padding:16px 20px;min-height:0}
.val h3{margin:0;font-size:1.35rem}
.fact{--c:var(--accent);background:var(--card);cursor:default}
.f-pin{--c:#e2575c}.f-pass{--c:#4f8cff}.f-globe{--c:#22b3a0}.f-cup{--c:#c98a4b}.f-wind{--c:var(--accent)}
.fact svg{color:var(--c);overflow:visible}
.fact:hover,.fact:focus-within{transform:translateY(-6px);color:var(--text);background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 38%,var(--card)) 0%,var(--card) 72%);border-color:color-mix(in srgb,var(--c) 55%,transparent);animation:bulb 2.2s ease-in-out infinite}
:root:not([data-theme=dark]) .fact:hover{background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 30%,#fff) 0%,var(--card) 72%)}
.fact:hover svg{filter:drop-shadow(0 0 8px var(--c))}
/* idle animations */
.f-pin svg{animation:fpin 2.6s ease-in-out infinite}
.f-pass svg{animation:fpass 3.4s ease-in-out infinite;transform-origin:50% 90%}
.f-globe svg{animation:fglobe 5s ease-in-out infinite}
.f-cup .steam{animation:fsteam 2.4s ease-in-out infinite}
.f-wind .flow{stroke-dasharray:10 6;animation:fflow 1.4s linear infinite}
.f-wind svg{animation:fsway 2.2s ease-in-out infinite;transform-origin:20% 50%}
@keyframes fpin{0%,100%{transform:translateY(0)}45%{transform:translateY(-6px)}60%{transform:translateY(0)}70%{transform:translateY(-2px)}}
@keyframes fpass{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-2deg)}}
@keyframes fglobe{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes fsteam{0%{opacity:0;transform:translateY(4px)}40%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
@keyframes fflow{to{stroke-dashoffset:-32}}
@keyframes fsway{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.fact svg,.fact .steam,.fact .flow,.fact:hover{animation:none!important}.fact:hover{transform:none}}

/* v-identity-3: disclaimer under the lead, smaller */
.id-disclaimer{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted);margin:2px 0 1.4em}

/* v-home-1: collaboration card stretches across the gap to the photo's left edge (two-column layout only) */
@media(min-width:769px){.hero .intro .opp{margin-right:calc(-1 * var(--hero-gap,clamp(48px,7vw,120px)))}}

/* v-home-2: Home section titles in the same font as the page titles (Fraunces bold) */
main h2.news-h{font-family:var(--title)!important;font-weight:700;font-style:normal;letter-spacing:-.015em}

/* v-home-3: creative section title + small label after the dash */
main h2.news-h .h-tag{font-family:var(--serif);font-weight:400;font-style:italic;font-size:.42em;letter-spacing:0;color:var(--muted);white-space:nowrap;vertical-align:.2em}
@media(max-width:600px){main h2.news-h .h-tag{display:block;font-size:.5em;margin-top:6px;vertical-align:0}main h2.news-h .h-tag{white-space:normal}}

/* v-research-1: sail note, mission, research wheel, overview, Kazma-style research areas */
.r-sail{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted);margin:-4px 0 18px}
.r-mission{font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.6;margin:0 0 10px}
.rwheel-fig{margin:18px auto 30px;text-align:center}
.rwheel{width:min(100%,520px);height:auto;display:block;margin:0 auto}
.rwheel .seg{fill:var(--accent);fill-opacity:var(--o);stroke:var(--accent);stroke-opacity:.55;stroke-width:1.2;transition:fill-opacity .3s ease}
.rwheel .seg:hover{fill-opacity:calc(var(--o) + .15)}
.rwheel .wt{font-family:var(--title);font-weight:700;font-size:26px;fill:var(--text)}
.rwheel .ws{font-family:var(--serif);font-style:italic;font-size:15.5px;fill:var(--text);opacity:.85}
.rwheel .warr path{fill:var(--accent2)}
.rwheel .wc{fill:var(--card);stroke:var(--line);stroke-width:2}
.rwheel .wct{font-family:var(--title);font-weight:700;font-size:30px;fill:var(--text)}
.rwheel .wcs{font-family:var(--serif);font-style:italic;font-size:18px;fill:var(--muted)}
.rwheel-fig figcaption{font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.5;color:var(--text);max-width:820px;margin:16px auto 0}
.r-overview p{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.65}
.r-qs{margin:4px 0 16px;padding-left:22px}.r-qs li{margin:6px 0;font-style:italic;font-size:clamp(1.02rem,1.35vw,1.15rem)}
.r-qs li::marker{color:var(--accent)}
.r-areas{display:grid;gap:34px;margin-top:8px}
.ra{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:clamp(20px,3vw,40px);align-items:start;padding-bottom:30px;border-bottom:1px solid var(--line)}
.ra:last-child{border-bottom:0}
.ra-fig{margin:0;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:14px}
.ra-fig svg{width:100%;height:auto;color:var(--accent);display:block}
.ra-fig figcaption{font-size:.88rem;color:var(--muted);line-height:1.4;margin-top:8px;font-style:italic}
.ra-body h3{margin:0 0 10px;font-size:clamp(1.25rem,1.9vw,1.55rem);color:var(--accent);font-style:normal;line-height:1.3}
.ra-body p{margin:0 0 12px;line-height:1.65;font-size:clamp(1rem,1.3vw,1.1rem)}
.ra-body i{font-style:italic}
.ra-rel{font-size:.98rem!important}.ra-rel a.gust{display:inline}
.ra-venue{color:var(--muted);font-size:.92em}
.ra-tag{display:inline-block;font-size:.55em;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--accent);border-radius:99px;padding:2px 10px;vertical-align:.35em;margin-left:6px}
.ra-flow{stroke-dasharray:10 8;animation:fflow 1.6s linear infinite}
.ra-wave{animation:fsway 3s ease-in-out infinite}
.ra-vib{animation:fpass 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.ra-rain{stroke-dasharray:8 10;animation:fflow 1.1s linear infinite}
.ra-spin{transform-box:fill-box;transform-origin:50% 100%;animation:fglobe 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.ra-fig svg *{animation:none!important}}
@media(max-width:760px){.ra{grid-template-columns:1fr}.ra-fig{max-width:420px}}

/* v-research-2: sail note matches the subtitle above it */
.subtitle.r-sail{font-size:clamp(1.15rem,2.6vw,1.45rem);line-height:1.45;color:var(--muted);margin:-18px 0 22px}

/* v-research-3: smaller wheel titles for the longer labels */
.rwheel .wt.sm{font-size:21px}

/* v-research-4: overview asides + numbered thrusts */
.r-aside{font-size:clamp(1.1rem,1.6vw,1.3rem)!important;color:var(--text)}
.r-thrusts{margin:4px 0 18px;padding-left:26px}.r-thrusts li{margin:8px 0;font-size:clamp(1.02rem,1.35vw,1.15rem);line-height:1.6}.r-thrusts li::marker{color:var(--accent);font-weight:700}

/* v-research-5: manuscript titles in related work; real figures (when chosen) */
.ra-ms{color:var(--text)}
.ra-fig img{width:100%;height:auto;display:block;border-radius:10px;background:#fff}

/* v-circle-1: initials avatars, roomier cards, linked joint work */
.people{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.person{border-radius:14px;padding:18px}
.person .av{width:56px;height:56px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--title);font-weight:700;font-size:1.2rem;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.person b{font-size:1.1rem}
.person .role{font-size:.9rem;line-height:1.4;margin-top:2px}
.person p{font-size:.95rem;line-height:1.5;margin-top:8px}
.person p a.gust{display:inline}.person .ms{font-style:italic}
.people.mentors .person{border-left:4px solid var(--accent)}

/* v-pubs-1: no thumbnails or venue logos */
.pub .thumb,.vlogo{display:none!important}

/* v-highlights-1: award logos */
.cards.awards .card img{height:160px;object-fit:contain;background:#fff;border-bottom:1px solid var(--line)}
.cards.awards{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:900px){.cards.awards{grid-template-columns:1fr 1fr}}@media(max-width:560px){.cards.awards{grid-template-columns:1fr}}

/* v-news-2: abstract pop-out card */
.nlinks .nbtn-abs,.ntitle-btn{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:inherit;text-align:left}
.nlinks .nbtn-abs{font-family:var(--serif)!important;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nlinks .nbtn-abs::after{content:" ↗"}
.nlinks .nbtn-abs:hover,.ntitle-btn:hover{color:var(--accent)}
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.modal[hidden]{display:none}
.modal-card{position:relative;max-width:760px;width:100%;max-height:85vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:16px;padding:30px 34px;box-shadow:0 24px 60px rgba(0,0,0,.45);animation:mpop .25s ease-out}
@keyframes mpop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal-kicker{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.modal-card h3{margin:0 0 14px;font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.3;color:var(--accent);font-weight:400}
.modal-card p{line-height:1.65;margin:0 0 12px;font-size:1.02rem}
.modal-x{position:absolute;top:10px;right:14px;font-size:1.8rem;line-height:1;background:none;border:0;color:var(--muted);cursor:pointer}
.modal-x:hover{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.modal-card{animation:none}}
.pcap{cursor:default}

/* v-unfiltered-1: header like other pages + coming-soon line */
.uf-page main h1{font-family:var(--title)!important;font-style:normal;font-weight:700}
.uf-soon{font-size:clamp(1.2rem,2vw,1.5rem);color:var(--text);margin:10px 0 40px}

/* v-otc-1: travel flags + captioned photo wall */
.otc .flags{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px}
.otc .flags .flag{width:36px;height:24px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.2);vertical-align:0}
.otc .flags .flag.sq{width:24px}
.otc .card p{font-size:1rem;color:var(--text)}
.photo-wall figure{margin:0}
.photo-wall img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.photo-wall figcaption{font-size:.9rem;color:var(--muted);font-style:italic;margin-top:6px;text-align:center}
.cards.otc{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:900px){.cards.otc{grid-template-columns:1fr 1fr}}@media(max-width:560px){.cards.otc{grid-template-columns:1fr}}

/* v-otc-2: real photo wall */
.gallery.photo-wall{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:900px){.gallery.photo-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:560px){.gallery.photo-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
.photo-wall img{aspect-ratio:3/4;transition:transform .35s ease,box-shadow .35s ease}
.photo-wall figure:hover img{transform:translateY(-4px);box-shadow:0 12px 24px -10px rgba(0,0,0,.5)}
@media(prefers-reduced-motion:reduce){.photo-wall figure:hover img{transform:none}}
/* v-otc-3: masonry photo wall — photos keep their natural shapes */
.gallery.photo-wall{display:block;columns:4 220px;column-gap:16px}
.photo-wall figure{break-inside:avoid;margin:0 0 18px;display:inline-block;width:100%}
.photo-wall img{aspect-ratio:auto;height:auto}

/* v-news-3: highlighted Ph.D. card */
.nitem.hl{position:relative;background:linear-gradient(160deg,color-mix(in srgb,#f4c542 14%,transparent),transparent 60%);border-radius:12px 12px 0 0;padding-left:14px;padding-right:14px}
.nitem.hl .hl-ico{width:46px;height:46px;display:block;margin:4px 0 8px;filter:drop-shadow(0 0 10px rgba(244,197,66,.45));animation:hlbob 3s ease-in-out infinite}
.nitem.hl .ntitle-btn{color:#f4c542}
:root:not([data-theme=dark]) .nitem.hl .ntitle-btn{color:#a8740c}
@keyframes hlbob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.nitem.hl .hl-ico{animation:none}}

/* v-news-4: Ph.D. card — glowing animated border (option C) */
@property --glow-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.nitem.phd-glow{position:relative;isolation:isolate;border:0!important;border-radius:14px;padding:20px 18px!important;background:transparent}
.nitem.phd-glow::before{content:"";position:absolute;inset:-2px;border-radius:16px;z-index:-2;background:conic-gradient(from var(--glow-a),#f4c542,#6fd3a0,#7aa7ff,#ff7a59,#f4c542);animation:glowspin 4s linear infinite}
.nitem.phd-glow::after{content:"";position:absolute;inset:0;border-radius:14px;z-index:-1;background:var(--bg)}
@keyframes glowspin{to{--glow-a:360deg}}
@media(prefers-reduced-motion:reduce){.nitem.phd-glow::before{animation:none}}

.subtitle a.gust{display:inline;text-decoration:none;color:var(--accent)}

/* v-gust-fix: inline-block so the drift works everywhere; no underline hiding the streaks */
a.gust{text-decoration:none}

/* v-gust-fix2: links inside paragraphs stay inline (no wrap gaps); drift via left offset since transforms do not apply to inline text */
.bio-intro a.gust,.bio-outro a.gust,.id-story a.gust,.ra-rel a.gust,.person p a.gust{left:0;transition:left .3s ease,color .25s ease}
.bio-intro a.gust:hover,.bio-outro a.gust:hover,.id-story a.gust:hover,.ra-rel a.gust:hover,.person p a.gust:hover{left:2px;transform:none}

/* v-gust-fix3: streaks for wrapped inline links drawn as moving background lines on every line fragment */
.bio-intro a.gust::before,.bio-intro a.gust::after,.bio-intro a.gust .st,.bio-outro a.gust::before,.bio-outro a.gust::after,.bio-outro a.gust .st,.id-story a.gust::before,.id-story a.gust::after,.id-story a.gust .st,.ra-rel a.gust::before,.ra-rel a.gust::after,.ra-rel a.gust .st,.person p a.gust::before,.person p a.gust::after,.person p a.gust .st,.subtitle a.gust::before,.subtitle a.gust::after,.subtitle a.gust .st{display:none}
.bio-intro a.gust,.bio-outro a.gust,.id-story a.gust,.ra-rel a.gust,.person p a.gust,.subtitle a.gust{-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat;background-image:linear-gradient(90deg,transparent,var(--accent)),linear-gradient(90deg,transparent,var(--accent));background-size:0 0,0 0}
.bio-intro a.gust:hover,.bio-outro a.gust:hover,.id-story a.gust:hover,.ra-rel a.gust:hover,.person p a.gust:hover,.subtitle a.gust:hover{background-size:40% 2px,30% 2px;animation:gustbg .9s ease-out infinite}
@keyframes gustbg{0%{background-position:-60% 38%,-80% 72%}100%{background-position:180% 38%,200% 72%}}
@media(prefers-reduced-motion:reduce){.bio-intro a.gust:hover,.bio-outro a.gust:hover,.id-story a.gust:hover,.ra-rel a.gust:hover,.person p a.gust:hover,.subtitle a.gust:hover{animation:none;background-size:0 0}}
.news-grid .nitem.no-top{border-top-color:transparent!important}

/* v-kcard-2: card stays open while the cursor is inside it, so its link can be clicked; inline streak link */
@media(hover:hover){.brand:hover+.kcard,.kcard:hover{opacity:1;visibility:visible;transform:none;pointer-events:auto}}
.kcard p a.gust{display:inline;left:0;color:var(--accent);text-decoration:none;transition:left .3s ease,color .25s ease;-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat;background-image:linear-gradient(90deg,transparent,var(--accent)),linear-gradient(90deg,transparent,var(--accent));background-size:0 0,0 0}
.kcard p a.gust::before,.kcard p a.gust::after,.kcard p a.gust .st{display:none}
.kcard p a.gust:hover{left:2px;transform:none;color:var(--accent2);background-size:40% 2px,30% 2px;animation:gustbg .9s ease-out infinite}
#lattice-towers{scroll-margin-top:100px}
@media(hover:hover){.kcard{pointer-events:auto}}

/* v-kcplot: VIV figure in logo card */
.kc-plot{margin:2px 0 12px}.kc-plot img{display:block;width:100%;height:auto;border-radius:8px;background:#fff;border:1px solid var(--line)}
@media(max-height:960px){.kcard{max-height:calc(100vh - 84px);overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}.kcard::before{display:none}}

/* v-mobile-fixes: SVG theme icon; tap-to-show photo caption on touch screens */
#theme-toggle{display:inline-flex;align-items:center;justify-content:center;line-height:1}
#theme-toggle svg{width:26px;height:26px;display:block}
#theme-toggle:hover{color:var(--accent)}
@media(hover:none){
  .pcap{position:absolute;left:50%;bottom:16px;margin:0;transform:translate(-50%,8px);opacity:0;visibility:hidden;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .hero .profile{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .hero .profile.cap-on .pcap{opacity:1;visibility:visible;transform:translate(-50%,0)}
}