/* =========================================================== ASIF RAHMAN — shared styles for every page. Edit here once and all pages change. =========================================================== */ :root{ --paper:#F3F5F0; --ink:#182420; --muted:#4E5D56; --line:#C9D2C7; --grid:rgba(24,36,32,.05); --defender:#1F4FBF; /* links, the quantal curve */ --attacker:#C03B2D; /* reserved for attacker marks in figures */ --panel:rgba(255,255,255,.55); --serif:"STIX Two Text",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,monospace; } /* dark theme. Toggled by data-theme on , set before paint by site.js */ html[data-theme="dark"]{ --paper:#121815; --ink:#E7EDE8; --muted:#93A49C; --line:#2B3A33; --grid:rgba(231,237,232,.045); --defender:#6D93FF; --attacker:#E4796A; --panel:rgba(255,255,255,.035); } html[data-theme="dark"] .portrait{background:#1B241F} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--serif); font-size:1.05rem; line-height:1.7; color:var(--ink); background-color:var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:36px 36px; transition:background-color .25s ease,color .25s ease; } a{color:var(--defender);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{text-decoration-thickness:2px} :focus-visible{outline:2px solid var(--defender);outline-offset:3px;border-radius:2px} .skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem .8rem} .skip:focus{left:.5rem;top:.5rem;z-index:10} .wrap{max-width:780px;margin:0 auto;padding:0 1.4rem} /* top nav */ .nav{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:1.4rem 0} .nav .who{font-family:var(--mono);font-weight:500;font-size:.9rem;color:var(--ink);text-decoration:none} .nav ul{display:flex;gap:1.1rem;list-style:none;flex-wrap:wrap;align-items:baseline} .nav ul a{font-family:var(--mono);font-size:.82rem;color:var(--muted);text-decoration:none} .nav ul a:hover{color:var(--defender);text-decoration:underline} .nav ul a.here{color:var(--ink);text-decoration:underline;text-decoration-color:var(--defender);text-underline-offset:5px} /* theme toggle, injected by site.js so it never appears without JS */ .themebtn{font-family:var(--mono);font-size:.82rem;color:var(--muted);background:none; border:none;cursor:pointer;padding:0;line-height:inherit} .themebtn:hover{color:var(--defender);text-decoration:underline} /* hero, home page only */ .hero{padding:3.2rem 0 1rem} .hero-top{display:flex;gap:2.4rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap} .portrait{width:clamp(150px,24vw,200px);height:auto;flex:none;border:1px solid var(--line);background:#fff;padding:6px} .hero h1{font-weight:600;font-size:clamp(2.4rem,7vw,3.8rem);line-height:1.08;letter-spacing:-.01em} .hero .thesis{margin-top:1.1rem;font-size:1.15rem;line-height:1.5;max-width:52ch} .hero .meta{margin-top:1.3rem;font-family:var(--mono);font-size:.85rem;color:var(--muted);line-height:1.8} /* page heading, inner pages */ .pagehead{padding:2.8rem 0 .2rem} .pagehead h1{font-weight:600;font-size:clamp(2rem,5.5vw,2.9rem);line-height:1.1;letter-spacing:-.01em} .pagehead p{margin-top:.8rem;color:var(--muted);max-width:58ch} .pagehead + section{margin-top:1.8rem} /* figure */ .fig{margin:2.6rem 0 0;border:1px solid var(--line);background:var(--panel);padding:1.2rem 1.2rem .9rem} .fig svg{display:block;width:100%;height:auto} .fig .axis{stroke:var(--muted);stroke-width:1} .fig .tick{font-family:var(--mono);font-size:11px;fill:var(--muted)} .fig .br{stroke:var(--muted);stroke-width:1.75;fill:none;stroke-dasharray:5 5} .fig .qr{stroke:var(--defender);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round} .fig .qr.draw{stroke-dasharray:820;stroke-dashoffset:820;animation:draw 1.6s ease-out .3s forwards} @keyframes draw{to{stroke-dashoffset:0}} .fig .lab-br{font-family:var(--mono);font-size:12px;fill:var(--muted)} .fig .lab-qr{font-family:var(--mono);font-size:12px;fill:var(--defender)} figcaption{margin-top:.7rem;font-size:.92rem;color:var(--muted)} figcaption b{color:var(--ink);font-weight:600} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .fig .qr.draw{animation:none;stroke-dashoffset:0} } /* result figures, shared bar chart vocabulary */ .fig .gridline{stroke:var(--line);stroke-width:1;opacity:.55} .fig .bar.s1{fill:var(--defender)} .fig .bar.s2{fill:var(--attacker)} .fig .val{font-family:var(--mono);font-size:10px;fill:var(--muted)} .fig .axlab{font-size:10.5px;letter-spacing:.04em} .fig .note{font-style:italic} .fig.zoomable{cursor:zoom-in} /* lambda slider on the home figure */ .slider{margin-top:1rem;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap; font-family:var(--mono);font-size:.82rem;color:var(--muted)} .slider input[type=range]{flex:1;min-width:180px;accent-color:var(--defender);cursor:pointer} .slider output{color:var(--ink);min-width:5.4rem} /* sections */ section{margin-top:4.2rem;border-top:1px solid var(--line);padding-top:1.8rem} .eyebrow{font-family:var(--mono);font-weight:500;font-size:.82rem;letter-spacing:.1em;color:var(--muted);margin-bottom:1.2rem} .eyebrow .s{color:var(--defender)} section p{max-width:66ch} section p + p{margin-top:1rem} h3{font-weight:600;font-size:1.15rem;margin:1.8rem 0 .5rem} h3:first-of-type{margin-top:0} /* in page contents, highlighted while scrolling */ .toc{position:sticky;top:0;z-index:5;margin:0 0 2rem;padding:.7rem 0; background:var(--paper);border-bottom:1px solid var(--line); font-family:var(--mono);font-size:.8rem;display:flex;gap:1.1rem;flex-wrap:wrap} .toc a{color:var(--muted);text-decoration:none} .toc a:hover{color:var(--defender)} .toc a.active{color:var(--ink);text-decoration:underline; text-decoration-color:var(--defender);text-underline-offset:5px} /* filter bar */ .filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1.8rem} .filters .flabel{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-right:.2rem} .fbtn{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--muted); border:1px solid var(--line);background:var(--panel);padding:.2rem .65rem;border-radius:99px;cursor:pointer} .fbtn:hover{color:var(--defender);border-color:var(--defender)} .fbtn[aria-pressed="true"]{color:var(--paper);background:var(--defender);border-color:var(--defender)} .is-hidden{display:none !important} .noresult{color:var(--muted);font-style:italic} /* project entries */ .proj{margin-top:3.4rem} .proj:first-of-type{margin-top:0} .proj h3{margin:0 0 .3rem;font-size:1.3rem} .proj h3 a{text-decoration:none} .proj h3 a:hover{text-decoration:underline} .proj .tagline{color:var(--muted);max-width:62ch} .proj .meta{margin-top:.55rem;font-family:var(--mono);font-size:.78rem; display:flex;gap:.9rem;flex-wrap:wrap;align-items:center} .proj .stack{margin-top:.5rem;display:flex;gap:.4rem;flex-wrap:wrap} .proj p{margin-top:1rem} .proj .fig{margin-top:1.8rem} /* headline numbers */ .nums{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:1.4rem; border-left:2px solid var(--defender);padding-left:1.1rem} .nums div{min-width:8rem} .nums .n{font-family:var(--mono);font-size:1.5rem;font-weight:500;color:var(--ink);line-height:1.2} .nums .k{font-family:var(--mono);font-size:.74rem;color:var(--muted);letter-spacing:.03em} /* publications */ .pub{display:grid;grid-template-columns:4.2rem 1fr;gap:1rem;margin-top:1.6rem} .pub:first-of-type{margin-top:0} .pub-year{font-family:var(--mono);font-size:.85rem;color:var(--muted);padding-top:.25rem} .pub-title{font-weight:600;font-size:1.08rem;line-height:1.45} .pub-authors{margin-top:.25rem;color:var(--muted);font-size:.98rem} .pub-authors b{color:var(--ink);font-weight:600} .pub-links{margin-top:.35rem;font-family:var(--mono);font-size:.82rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .chip{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink);border:1px solid var(--line);background:var(--panel);padding:.1rem .5rem;border-radius:99px} .citebtn{font-family:var(--mono);font-size:.82rem;color:var(--defender);background:none; border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .citebtn.ok{color:var(--muted);text-decoration:none} /* news */ .news{list-style:none} .news li{display:grid;grid-template-columns:7.2rem 1fr;gap:1rem;padding:.65rem 0;border-bottom:1px dashed var(--line)} .news li:last-child{border-bottom:none} .news .d{font-family:var(--mono);font-size:.85rem;color:var(--muted);padding-top:.15rem} .news p{max-width:60ch} /* lightbox */ .lb{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center; background:rgba(10,16,13,.86);padding:clamp(1rem,4vw,3rem);cursor:zoom-out} .lb[hidden]{display:none} .lb-inner{background:var(--paper);border:1px solid var(--line);padding:1.4rem; max-width:1000px;width:100%;max-height:90vh;overflow:auto;cursor:auto} .lb-inner svg{width:100%;height:auto} .lb-close{float:right;font-family:var(--mono);font-size:.8rem;color:var(--muted); background:none;border:none;cursor:pointer} .lb-close:hover{color:var(--defender)} /* contact + footer */ a.mail{color:var(--defender);cursor:pointer;text-decoration:underline;text-underline-offset:3px} .links{margin-top:1rem;font-family:var(--mono);font-size:.88rem;display:flex;gap:1.4rem;flex-wrap:wrap} footer{margin-top:3rem;border-top:1px solid var(--line);padding:1.6rem 0 2.6rem; font-family:var(--mono);font-size:.8rem;color:var(--muted); display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} @media (max-width:560px){ .pub{grid-template-columns:1fr} .pub-year{padding-top:0} .news li{grid-template-columns:1fr;gap:.15rem} .nums{gap:1.4rem} }