:root { --paper:#f7f0e9; --paper-deep:#ede2d7; --white:#ffffff; --ink:#17243b; --charcoal:#202020; --muted:#6e6964; --gold:#ae7e3c; --line:rgba(23,36,59,.18); --serif:"Playfair Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.page-noise { pointer-events:none; position:fixed; inset:0; z-index:10; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); }
.wrap { width:100%; margin-inline:0; }
.site-header { width:100%; min-height:112px; margin:0; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:20; }
.wordmark { font-family:var(--serif); font-size:22px; font-weight:700; letter-spacing:-.04em; display:flex; align-items:center; gap:11px; }
.wordmark span { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--ink); border-radius:50%; font:500 10px var(--mono); letter-spacing:0; }
.wordmark img { display:block; width:48px; height:48px; object-fit:contain; }
.wordmark img.profile-badge { width:52px; height:52px; object-fit:cover; object-position:50% 28%; border:2px solid #d60335; border-radius:50%; padding:2px; background:var(--paper); }
.wordmark .wordmark-name { display:block; width:auto; height:auto; border:0; border-radius:0; color:var(--ink); font:600 22px/1 var(--serif); letter-spacing:-.045em; }
.main-nav { display:flex; align-items:center; gap:29px; font-size:14px; font-weight:600; }
.main-nav a { position:relative; padding:7px 0; }
.main-nav a::after { content:""; width:0; height:1px; background:var(--gold); position:absolute; left:0; bottom:2px; transition:width .2s ease; }
.main-nav a:hover::after,.main-nav a.active::after { width:100%; }
.cv-link { margin-left:8px; padding:9px 14px; border:1px solid var(--ink); font:500 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; transition:background .2s ease,color .2s ease; }.cv-link:hover { background:var(--ink); color:var(--paper); }
.menu-button { display:none; background:transparent; border:0; font:500 12px var(--mono); color:var(--ink); text-transform:uppercase; letter-spacing:.08em; }
.eyebrow { margin:0 0 18px; color:var(--gold); font:500 11px var(--mono); letter-spacing:.11em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { text-wrap:balance; }
h1 { font:600 clamp(48px, 6vw, 86px)/.99 var(--serif); letter-spacing:-.055em; margin:0; }
h1 em,h2 em { color:var(--gold); font-weight:500; }
h2 { font:600 clamp(35px, 4.2vw, 60px)/1.04 var(--serif); letter-spacing:-.05em; margin:0; }
h3 { font:600 29px/1.12 var(--serif); letter-spacing:-.035em; margin-bottom:16px; }
.hero { min-height:690px; padding:108px 0 96px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:80px; }
.hero-copy { max-width:670px; }
.hero-intro,.page-lead { max-width:570px; font-size:20px; color:#535963; margin:31px 0; }
.hero-actions { display:flex; align-items:center; gap:27px; margin-top:36px; }
.button { display:inline-flex; align-items:center; gap:20px; border:1px solid var(--ink); padding:14px 18px; font-size:13px; font-weight:700; transition:.2s ease; }
.button span,.text-link span { font-size:18px; line-height:0; }
.button-dark { background:#d60335; border-color:#d60335; color:var(--paper); }.button-dark:hover { background:#a90229; border-color:#a90229; }
.button-light { background:transparent; }.button-light:hover { color:var(--paper); background:var(--ink); }
.text-link { display:inline-flex; align-items:center; gap:10px; color:#d60335; font-size:13px; font-weight:700; border-bottom:1px solid #d60335; padding-bottom:3px; transition:color .2s ease; }.text-link:hover { color:var(--ink); }
.portrait-panel { height:465px; background:#d7c6b5; position:relative; overflow:hidden; align-self:center; }
.portrait-panel::before { content:""; position:absolute; inset:18px; border:1px solid rgba(255,255,255,.7); z-index:1; pointer-events:none; }
.portrait { width:100%; height:100%; object-fit:cover; object-position:50% 29%; filter:grayscale(12%) sepia(10%) contrast(.98); }
.portrait-note { position:absolute; z-index:2; left:22px; top:27px; color:var(--paper); font:500 11px/1.25 var(--mono); letter-spacing:.06em; text-transform:uppercase; }.portrait-note span { display:block; opacity:.75; font-size:9px; margin-bottom:4px; }
.portrait-caption { position:absolute; z-index:2; right:25px; bottom:26px; color:white; writing-mode:vertical-rl; transform:rotate(180deg); font:500 10px var(--mono); letter-spacing:.07em; text-transform:uppercase; }.portrait-caption span { color:var(--gold); margin-bottom:12px; }
.personal-note { display:grid; grid-template-columns:190px minmax(0, 700px); justify-content:space-between; gap:80px; padding:105px 70px 110px; background:var(--white); }.personal-note .eyebrow { margin-top:9px; }.note-index { font:600 60px/.8 var(--serif); letter-spacing:-.06em; color:var(--gold); }.personal-note h2 { font-size:45px; margin-bottom:25px; }.personal-note p:not(.eyebrow) { max-width:630px; color:var(--muted); font-size:17px; }.personal-note .text-link { margin-top:14px; }
.signal-band { padding:83px 0; background:var(--ink); color:var(--paper); }.signal-grid { display:grid; grid-template-columns:190px 1fr 64px; gap:45px; align-items:start; }.signal-grid .eyebrow{ margin-top:11px; }.signal-statement { max-width:760px; margin:0; font:500 clamp(25px,3vw,40px)/1.23 var(--serif); letter-spacing:-.035em; }.signal-statement em { color:#d9b880; }.round-link { border:1px solid var(--gold); color:var(--gold); width:58px; height:58px; display:grid; place-items:center; border-radius:50%; font-size:24px; transition:.2s; }.round-link:hover { background:var(--gold); color:var(--ink); }
.section-pad { padding:126px 0; }.section-heading { margin-bottom:60px; }.split-heading { display:flex; justify-content:space-between; gap:70px; align-items:end; }.split-heading > p { width:350px; margin:0 0 5px; color:var(--muted); }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.metric-grid article { min-height:220px; padding:35px 26px 28px 0; border-right:1px solid var(--line); }.metric-grid article:not(:first-child) { padding-left:27px; }.metric-grid article:first-child { padding-left:27px; }.metric-grid article:last-child { padding-right:27px; border-right:0; }.metric-number { display:block; margin-bottom:25px; font:600 59px/.8 var(--serif); letter-spacing:-.065em; }.metric-number span { color:var(--gold); }.metric-grid p { color:var(--muted); font-size:14px; max-width:150px; margin:0; }
.work-feature { display:grid; grid-template-columns:190px 1fr 315px; gap:45px; padding:80px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.feature-meta { display:flex; flex-direction:column; justify-content:space-between; }.index-mark { font:500 10px var(--mono); color:var(--muted); }.feature-label,.case-type,.pub-journal { font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }.feature-copy h2 { font-size:44px; margin:16px 0 20px; }.feature-copy > p:not(.feature-label) { color:var(--muted); max-width:530px; }.art-grid { display:grid; grid-template:repeat(4,1fr)/repeat(4,1fr); background:#d5c5b3; min-height:275px; padding:20px; gap:7px; }.art-grid span { border:1px solid rgba(23,36,59,.28); }.art-grid span:nth-child(1){ grid-row:1/4; grid-column:1/3; background:var(--ink); }.art-grid span:nth-child(2){ grid-column:3/5; }.art-grid span:nth-child(3){ grid-row:4; grid-column:2/5; background:var(--gold); }.art-grid i { font:600 65px var(--serif); color:var(--paper); grid-area:2/1; z-index:2; align-self:center; justify-self:center; }
.projects-section { padding-bottom:100px; }.project-list { border-top:1px solid var(--line); }.project-row { display:grid; grid-template-columns:85px 1fr 100px 28px; align-items:center; gap:20px; padding:25px 3px; border-bottom:1px solid var(--line); transition:padding .2s, background .2s; }.project-row:hover { background:rgba(174,126,60,.08); padding-left:12px; padding-right:12px; }.project-id,.project-year { font:500 10px var(--mono); color:var(--muted); }.project-row strong { display:block; font:600 25px var(--serif); letter-spacing:-.025em; }.project-row small { display:block; margin-top:3px; color:var(--muted); font-size:13px; }.project-row b { font-size:21px; font-weight:400; color:var(--gold); }
.contact-strip { background:var(--paper-deep); margin-bottom:0px; padding:65px 78px; display:flex; justify-content:space-between; align-items:center; }.contact-strip h2 { font-size:45px; }.site-footer { min-height:90px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:var(--muted); font:400 10px var(--mono); letter-spacing:.07em; text-transform:uppercase; }.site-footer a { color:var(--ink); }
.page-hero { padding:110px 0 105px; border-bottom:1px solid var(--line); }.page-hero .page-lead { margin:34px 0 0; }.dark-editorial { background:var(--ink); color:var(--paper); padding:105px 0; }.editorial-grid { display:grid; grid-template-columns:190px 1fr; gap:60px; }.editorial-grid .eyebrow { margin-top:11px; }.editorial-grid h2 { max-width:790px; font-size:48px; }.editorial-grid p:not(.eyebrow) { max-width:630px; color:#d6d4d0; margin:25px 0 0; }.inverse { color:var(--paper); margin-top:26px; }
.interest-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }.interest-grid article { padding:36px 45px 38px 0; border-bottom:1px solid var(--line); }.interest-grid article:nth-child(even){ padding-left:45px; border-left:1px solid var(--line); }.interest-grid span,.plain-list span { font:500 10px var(--mono); color:var(--gold); }.interest-grid h3 { font-size:28px; margin:27px 0 10px; }.interest-grid p { max-width:410px; color:var(--muted); margin:0; }
.timeline-block { padding-top:10px; padding-bottom:126px; }.academic-timeline { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }.academic-timeline li { display:grid; grid-template-columns:165px 1fr 90px; align-items:center; gap:30px; padding:25px 0; border-bottom:1px solid var(--line); }.academic-timeline li>span,.academic-timeline b { font:500 10px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }.academic-timeline h3 { font-size:25px; margin:0 0 3px; }.academic-timeline p { margin:0; color:var(--muted); font-size:14px; }.academic-timeline b { color:var(--gold); text-align:right; }
.career-list { padding:32px 0 100px; }.career-list article { display:grid; grid-template-columns:190px 1fr; gap:55px; padding:52px 0; border-bottom:1px solid var(--line); }.career-list article>span { color:var(--gold); font:500 11px var(--mono); }.career-list h2 { font-size:44px; margin-bottom:17px; }.career-list article div>p:last-child { max-width:600px; margin-bottom:0; color:var(--muted); }
.brand-section { padding:85px 0 38px; }.brand-grid { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.brand-grid figure { height:145px; margin:0; padding:24px; display:grid; place-items:center; border-right:1px solid var(--line); background:rgba(255,255,255,.2); }.brand-grid figure:last-child { border-right:0; }.brand-grid img { display:block; max-width:100%; max-height:82px; object-fit:contain; filter:grayscale(1) contrast(.85); mix-blend-mode:multiply; transition:filter .2s ease; }.brand-grid figure:hover img { filter:grayscale(0) contrast(1); }
.case-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }.case-grid article { padding:42px 55px 45px 0; border-bottom:1px solid var(--line); min-height:330px; display:flex; flex-direction:column; align-items:start; }.case-grid article:nth-child(even) { padding-left:55px; border-left:1px solid var(--line); }.case-grid h3 { font-size:38px; margin:24px 0 15px; }.case-grid p { max-width:410px; color:var(--muted); margin-bottom:25px; }.case-grid .text-link { margin-top:auto; }.capability-band { margin-bottom:100px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:30px 0; display:grid; grid-template-columns:190px 1fr; gap:55px; }.capability-band .eyebrow { margin:3px 0; }.capability-band div { font:600 27px/1.35 var(--serif); letter-spacing:-.03em; color:var(--gold); }
.flagship-case { background:var(--ink); color:var(--paper); display:grid; grid-template-columns:130px minmax(0,1fr) 225px; gap:42px; padding:52px; }.flagship-case .eyebrow { margin-bottom:30px; }.flagship-number { display:block; font:600 65px/.8 var(--serif); color:var(--gold); letter-spacing:-.06em; }.flagship-case h2 { font-size:61px; margin:12px 0 16px; }.flagship-case .flagship-lead { color:var(--paper); font:500 25px/1.25 var(--serif); letter-spacing:-.025em; margin-bottom:17px; }.flagship-case div>p:not(.eyebrow):not(.case-type):not(.flagship-lead) { max-width:530px; color:#c9c7c3; }.flagship-case .button { margin-top:10px; background:var(--paper); color:var(--ink); border-color:var(--paper); }.flagship-case .button:hover { background:var(--gold); border-color:var(--gold); }.mango-diagram { align-self:center; display:flex; flex-direction:column; align-items:center; gap:10px; }.mango-diagram span { width:100%; border:1px solid rgba(247,240,233,.45); padding:10px; text-align:center; font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }.mango-diagram i { height:17px; border-left:1px solid var(--gold); }
.methods-section { padding:20px 0 105px; }.method-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }.method-grid article { min-height:260px; padding:35px 50px 36px 0; border-bottom:1px solid var(--line); }.method-grid article:nth-child(even) { padding-left:50px; border-left:1px solid var(--line); }.method-number { color:var(--gold); font:500 10px var(--mono); }.method-grid h3 { font-size:31px; margin:24px 0 12px; }.method-grid article>p:last-child { max-width:450px; margin:0; color:var(--muted); font-size:14px; }
.publication-section { padding:30px 0 95px; }.publication-card { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:100px 1fr 58px; gap:25px; padding:38px 0; align-items:start; }.pub-year { color:var(--gold); font:500 11px var(--mono); }.publication-card h3 { font-size:33px; margin:15px 0; max-width:800px; }.publication-card div>p:last-child { margin:0; color:var(--muted); }.small-round { width:45px; height:45px; font-size:18px; }.preprint-section { padding-top:0; }.plain-list { border-top:1px solid var(--line); }.plain-list article { display:grid; grid-template-columns:50px 1fr 90px; align-items:center; gap:20px; padding:23px 0; border-bottom:1px solid var(--line); }.plain-list p { margin:0; font:600 21px/1.25 var(--serif); letter-spacing:-.02em; }.plain-list b { font:500 10px var(--mono); color:var(--muted); text-transform:uppercase; text-align:right; }.talk-card { display:grid; grid-template-columns:150px 1fr 130px; gap:30px; padding:35px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.talk-card>span { font:500 10px var(--mono); color:var(--gold); text-transform:uppercase; }.talk-card p { margin:0 0 12px; font-size:13px; color:var(--muted); }.talk-card h3 { margin:0; font-size:31px; }.talk-card>span:last-child { color:var(--muted); text-align:right; }
.contact-hero { min-height:560px; padding:115px 0 100px; }.contact-hero .page-lead { margin:32px 0; }.email-link { display:inline-flex; gap:14px; font:500 clamp(23px,3.5vw,45px) var(--serif); color:var(--gold); border-bottom:1px solid var(--gold); padding-bottom:4px; letter-spacing:-.03em; }.contact-details { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-bottom:100px; }.contact-details article { min-height:210px; padding:35px 30px 30px 0; border-right:1px solid var(--line); }.contact-details article+article { padding-left:30px; }.contact-details article:last-child { border:0; }.contact-details h3 { font-size:31px; margin:26px 0; }.contact-details a { display:block; margin-bottom:8px; font:600 16px var(--serif); }.small-note { color:var(--muted); font-size:12px; }
.hero,.page-hero,.contact-hero,.metric-grid,.work-feature,.career-list,.methods-section,.publication-card,.talk-card,.contact-details { background:var(--white); }
.hero,.page-hero,.contact-hero { padding-left:60px; padding-right:60px; }
.work-feature,.career-list,.methods-section,.contact-details { padding-left:44px; padding-right:44px; }
.books-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:70px; padding:90px 0 115px; }.book-card { display:grid; grid-template-columns:minmax(190px, .82fr) 1fr; align-items:center; gap:37px; }.cover-link { display:block; background:var(--paper-deep); aspect-ratio:1; overflow:hidden; }.cover-link img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }.cover-link:hover img { transform:scale(1.025); }.book-card h2 { font-size:37px; margin:0 0 17px; }.book-card div>p:not(.eyebrow) { color:var(--muted); font-size:14px; }.book-card .button { margin-top:10px; }.availability { font:500 10px var(--mono); color:var(--gold); letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:800px){.wrap,.site-header{width:min(100% - 38px,1180px)}.site-header{min-height:78px}.wordmark{font-size:19px}.main-nav{display:none;position:absolute;top:77px;left:-19px;right:-19px;background:var(--paper);padding:18px 19px 24px;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:12px}.main-nav.is-open{display:flex}.menu-button{display:block}.cv-link{margin-left:auto;margin-right:15px;padding:8px 10px;font-size:10px}.hero{min-height:0;padding:65px 0 72px;grid-template-columns:1fr;gap:45px}.hero-intro,.page-lead{font-size:18px}.portrait-panel{height:400px;max-width:470px;width:100%}.signal-band{padding:54px 0}.signal-grid,.editorial-grid{grid-template-columns:1fr;gap:20px}.round-link{width:48px;height:48px}.section-pad{padding:80px 0}.split-heading{display:block}.split-heading>p{width:auto;margin:24px 0 0}.metric-grid{grid-template-columns:repeat(2,1fr)}.metric-grid article:nth-child(2){border-right:0}.metric-grid article:nth-child(3){border-top:1px solid var(--line);padding-left:0}.metric-grid article:nth-child(4){border-top:1px solid var(--line)}.work-feature{grid-template-columns:1fr;gap:25px;padding:55px 0}.feature-meta{flex-direction:row}.feature-copy h2{font-size:37px}.feature-art{max-width:360px;height:260px}.project-row{grid-template-columns:42px 1fr 25px}.project-year{display:none}.contact-strip{padding:44px 27px;display:block}.contact-strip .button{margin-top:30px}.site-footer{min-height:115px;align-items:flex-start;justify-content:center;flex-direction:column;gap:7px}.page-hero{padding:70px 0}.editorial-grid h2{font-size:39px}.interest-grid{grid-template-columns:1fr}.interest-grid article,.interest-grid article:nth-child(even){padding:32px 0;border-left:0}.timeline-block{padding-bottom:80px}.academic-timeline li{grid-template-columns:1fr;gap:7px}.academic-timeline b{text-align:left}.career-list{padding-bottom:60px}.career-list article{grid-template-columns:1fr;gap:18px;padding:38px 0}.career-list h2{font-size:37px}.case-grid{grid-template-columns:1fr}.case-grid article,.case-grid article:nth-child(even){padding:35px 0;min-height:0;border-left:0}.flagship-case{grid-template-columns:1fr;padding:35px 25px;gap:28px}.flagship-case .eyebrow{margin-bottom:20px}.flagship-number{font-size:52px}.flagship-case h2{font-size:49px}.flagship-case .flagship-lead{font-size:22px}.mango-diagram{max-width:260px}.methods-section{padding-bottom:75px}.method-grid{grid-template-columns:1fr}.method-grid article,.method-grid article:nth-child(even){padding:30px 0;min-height:0;border-left:0}.capability-band{grid-template-columns:1fr;gap:13px;margin-bottom:70px}.capability-band div{font-size:23px}.publication-section{padding-bottom:75px}.publication-card{grid-template-columns:1fr 45px;gap:14px}.publication-card .pub-year{grid-column:1/3}.publication-card h3{font-size:28px}.plain-list article{grid-template-columns:30px 1fr}.plain-list b{display:none}.talk-card{grid-template-columns:1fr;gap:12px}.talk-card>span:last-child{text-align:left}.contact-hero{min-height:0;padding:75px 0}.contact-details{grid-template-columns:1fr;margin-bottom:70px}.contact-details article,.contact-details article+article{padding:28px 0;border-right:0;border-bottom:1px solid var(--line);min-height:0}}
@media (max-width:800px){.brand-section{padding-top:65px}.brand-grid{grid-template-columns:repeat(2,1fr)}.brand-grid figure:nth-child(2n){border-right:0}.brand-grid figure:last-child{border-right:1px solid var(--line)}.books-grid{grid-template-columns:1fr;gap:48px;padding:65px 0 80px}.book-card{grid-template-columns:minmax(150px,210px) 1fr;gap:26px}}
@media (max-width:800px){.hero{padding:65px 25px 72px}.page-hero{padding:70px 25px}.contact-hero{padding:75px 25px}.work-feature{padding:55px 25px}.career-list{padding-left:25px;padding-right:25px}.methods-section{padding-left:25px;padding-right:25px}.contact-details{padding-left:25px;padding-right:25px}.publication-card,.talk-card{padding-left:20px;padding-right:20px}}
@media (max-width:800px){.personal-note{grid-template-columns:1fr;gap:28px;padding:70px 25px}.personal-note h2{font-size:37px}.note-index{font-size:48px}}
@media (max-width:460px){h1{font-size:46px}.hero-actions{display:block}.hero-actions .text-link{margin-top:24px}.metric-number{font-size:50px}.project-row strong{font-size:21px}.contact-strip h2{font-size:36px}.portrait-panel{height:330px}}

/* Systems-first additions */
.hero { grid-template-columns:1.1fr .72fr .78fr; gap:32px; }
.system-eyebrow { display:flex; align-items:center; gap:9px; }
.system-eyebrow span,.current-foot span { width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(174,126,60,.12); flex:0 0 auto; }
.current-index { align-self:center; border:1px solid var(--line); padding:24px; background:var(--white); }
.current-label { margin:0; color:var(--gold); font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.current-index ol { list-style:none; padding:0; margin:20px 0 17px; border-top:1px solid var(--line); }
.current-index li { display:grid; grid-template-columns:1fr; gap:3px; padding:11px 0; border-bottom:1px solid var(--line); }
.current-index li span { color:var(--muted); font:500 9px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.current-index li b { font-size:15px; letter-spacing:-.025em; }
.current-foot { display:flex; align-items:center; gap:9px; margin:0; color:var(--gold); font:500 9px var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.systems-layers { padding:110px 0; }
.layer-stack { border-top:1px solid var(--line); }
.layer-stack a { display:grid; grid-template-columns:1fr 65px 30px; align-items:center; gap:15px; padding:20px 0; border-bottom:1px solid var(--line); font:600 25px var(--sans); letter-spacing:-.04em; transition:padding .2s ease,color .2s ease,background .2s ease; }
.layer-stack a:hover { padding-left:14px; color:var(--gold); background:rgba(174,126,60,.05); }
.layer-stack b { color:var(--gold); font:500 10px var(--mono); letter-spacing:.08em; }
.layer-stack i { color:var(--muted); font-style:normal; }
@media (max-width:800px){.hero{grid-template-columns:1fr;gap:30px}.current-index{max-width:470px;width:100%;order:2}.portrait-panel{order:3}.systems-layers{padding:80px 0}.layer-stack a{grid-template-columns:1fr 45px 25px;font-size:20px}.layer-stack b{font-size:9px}}

/* Full-bleed site layout: keep a reading gutter, but remove every max-width container. */
:root { --site-gutter:clamp(20px, 5vw, 80px); }
.wrap { width:100%; margin-inline:0; padding-inline:var(--site-gutter); }
.site-header { width:100%; margin:0; padding-inline:var(--site-gutter); }

/* Elevated header and systems-map hero */
.site-header { min-height:96px; gap:24px; background:rgba(247,240,233,.9); backdrop-filter:blur(14px); }
.header-context { display:flex; align-items:center; gap:8px; margin:0 0 0 20px; color:var(--muted); font:500 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.header-context span { width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(174,126,60,.12); }
.main-nav { margin-left:auto; gap:4px; padding:5px; border:1px solid var(--line); background:rgba(255,255,255,.54); }
.main-nav a { padding:8px 11px; font:500 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.main-nav a::after { display:none; }
.main-nav a:hover,.main-nav a.active { background:var(--ink); color:var(--paper); }
.cv-link { margin-left:0; border-color:var(--gold); color:var(--ink); }
.hero { position:relative; min-height:720px; padding-top:94px; padding-bottom:94px; background:linear-gradient(114deg,rgba(255,255,255,.76),rgba(247,240,233,.22) 57%,rgba(174,126,60,.09)),linear-gradient(rgba(23,36,59,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(23,36,59,.04) 1px,transparent 1px); background-size:auto,48px 48px,48px 48px; }
.hero-copy { max-width:690px; }
.hero h1 { font-size:clamp(42px,4.4vw,68px); line-height:.97; max-width:650px; }
.hero-intro { max-width:610px; font-size:21px; }
.hero-principle { display:grid; grid-template-columns:105px 1fr; gap:18px; max-width:590px; margin:42px 0 0; padding-top:15px; border-top:1px solid var(--line); color:var(--muted); font:500 12px/1.5 var(--mono); }
.hero-principle span { color:var(--gold); font-size:10px; letter-spacing:.09em; text-transform:uppercase; }
.current-index { align-self:stretch; display:flex; flex-direction:column; justify-content:center; border-color:rgba(23,36,59,.32); box-shadow:12px 12px 0 rgba(23,36,59,.07); }
.current-index::before { content:"Live practice"; color:var(--ink); font:500 9px var(--mono); letter-spacing:.09em; text-transform:uppercase; padding-bottom:18px; border-bottom:1px solid var(--line); }
.current-index ol { margin-top:0; }
.hero-map { min-height:510px; align-self:stretch; display:flex; flex-direction:column; padding:22px; color:var(--paper); background:var(--ink); box-shadow:12px 12px 0 var(--gold); overflow:hidden; }
.map-stage { position:relative; flex:1; min-height:365px; margin:18px 0; border:1px solid rgba(247,240,233,.2); background:radial-gradient(circle at center,rgba(174,126,60,.2),transparent 26%),linear-gradient(135deg,rgba(255,255,255,.05),transparent); }
.map-stage::before,.map-stage::after { content:""; position:absolute; inset:21px; border:1px solid rgba(247,240,233,.1); }
.map-stage::after { inset:auto 50% 0; height:100%; border-width:0 1px; }
.map-line { position:absolute; z-index:1; color:rgba(174,126,60,.65); font:400 28px/1 var(--mono); transform-origin:left; }
.line-one { top:28%; left:22%; transform:rotate(28deg); }.line-two { top:61%; left:18%; transform:rotate(-30deg); }.line-three { top:48%; left:52%; transform:rotate(136deg); }.line-four { top:47%; left:49%; transform:rotate(38deg); }
.map-node { position:absolute; z-index:2; padding:7px 9px; border:1px solid rgba(247,240,233,.4); background:var(--ink); color:#eef0ef; font:500 9px var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.node-human { top:15%; left:10%; }.node-product { right:8%; top:24%; }.node-cloud { right:11%; bottom:16%; }.node-research { bottom:13%; left:13%; }
.map-core { position:absolute; z-index:3; top:50%; left:50%; display:grid; place-items:center; width:118px; height:118px; transform:translate(-50%,-50%); border:1px solid var(--gold); background:#1f304e; color:var(--gold); overflow:hidden; }
.map-core::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 34%,rgba(23,36,59,.9) 76%); pointer-events:none; }
.map-core-icon { position:relative; z-index:1; width:52px; height:52px; margin-bottom:13px; color:var(--gold); }
.map-core small { position:absolute; z-index:1; bottom:11px; color:#f7f0e9; font:500 8px/1.25 var(--mono); letter-spacing:.1em; text-align:center; text-transform:uppercase; }
@media (max-width:1000px){.header-context{display:none}.main-nav{margin-left:auto}.hero{grid-template-columns:1.05fr .95fr}.hero-map{display:none}.current-index{min-height:440px}}
@media (max-width:800px){.site-header{min-height:78px;gap:10px}.main-nav{margin-left:0;padding:18px 19px 24px;border-inline:0;background:var(--paper)}.hero{min-height:0;padding-top:68px;padding-bottom:72px;background-size:auto,34px 34px,34px 34px}.hero h1{font-size:clamp(43px,11vw,60px)}.hero-principle{grid-template-columns:1fr;gap:7px;margin-top:34px}.current-index{min-height:0;box-shadow:8px 8px 0 rgba(23,36,59,.07)}.hero-map{display:flex;min-height:450px;box-shadow:8px 8px 0 var(--gold);order:3}.map-stage{min-height:310px}.cv-link{margin-right:10px}.header-context{display:none}}

/* Continuous live-system motion */
@keyframes status-pulse { 0%,100% { opacity:1; box-shadow:0 0 0 4px rgba(174,126,60,.12); } 50% { opacity:.55; box-shadow:0 0 0 9px rgba(174,126,60,0); } }
@keyframes grid-drift { from { background-position:0 0,0 0,0 0; } to { background-position:0 0,48px 48px,48px 48px; } }
@keyframes stage-drift { from { background-position:0 0,0 0; } to { background-position:0 0,42px 42px; } }
@keyframes core-breathe { 0%,100% { transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 0 rgba(174,126,60,.3); } 50% { transform:translate(-50%,-50%) scale(1.045); box-shadow:0 0 0 14px rgba(174,126,60,0); } }
@keyframes node-float-a { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes node-float-b { 0%,100% { transform:translateY(-4px); } 50% { transform:translateY(5px); } }
@keyframes signal-fade { 0%,100% { opacity:.26; } 50% { opacity:1; } }
.hero { animation:grid-drift 26s linear infinite; }
.header-context span,.system-eyebrow span,.current-foot span { animation:status-pulse 2.7s ease-in-out infinite; }
.map-stage { background-image:radial-gradient(circle at center,rgba(174,126,60,.2),transparent 26%),linear-gradient(135deg,rgba(255,255,255,.05),transparent),linear-gradient(rgba(247,240,233,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(247,240,233,.035) 1px,transparent 1px); background-size:auto,auto,21px 21px,21px 21px; animation:stage-drift 12s linear infinite; }
.map-core { animation:core-breathe 3.6s ease-in-out infinite; }
.map-node { animation:node-float-a 5s ease-in-out infinite; }
.node-product,.node-research { animation-name:node-float-b; animation-duration:6.2s; }
.node-cloud { animation-delay:1.4s; }.node-human { animation-delay:.7s; }.node-research { animation-delay:1.8s; }
.map-line { animation:signal-fade 2.4s ease-in-out infinite; }
.line-two { animation-delay:.55s; }.line-three { animation-delay:1.1s; }.line-four { animation-delay:1.65s; }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* One dashboard, not two competing panels. */
.hero { grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr); gap:clamp(36px,5vw,96px); }
.hero-map { min-height:460px; }
.map-stage { min-height:295px; margin-bottom:16px; }
.map-current { border-top:1px solid rgba(247,240,233,.22); border-bottom:1px solid rgba(247,240,233,.22); padding:12px 0 13px; }
.map-current ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; list-style:none; padding:0; margin:0; }
.map-current li { display:grid; gap:2px; padding:8px 0; border-top:1px solid rgba(247,240,233,.1); }
.map-current li span { color:#9da5ae; font:500 8px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.map-current li b { color:#f3eee6; font:600 13px var(--sans); letter-spacing:-.025em; }
@media (max-width:1000px){.hero{grid-template-columns:minmax(0,1fr) minmax(360px,.86fr)}.hero-map{display:flex;min-height:430px}.map-stage{min-height:270px}}
@media (max-width:800px){.hero{grid-template-columns:1fr}.hero-map{min-height:0}.map-stage{min-height:290px}.map-current ol{grid-template-columns:1fr 1fr}.map-current li b{font-size:12px}}
@media (max-width:460px){.map-current ol{grid-template-columns:1fr}.map-stage{min-height:270px}.node-product{right:4%}.node-cloud{right:5%}.node-human{left:5%}.node-research{left:6%}}

/* Five rotating views of the same practice. */
.map-navigation { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:11px; }
.map-progress { display:flex; gap:5px; }
.map-progress span { width:18px; height:2px; background:rgba(247,240,233,.22); transition:width .35s ease,background .35s ease; }
.map-progress span.active { width:34px; background:var(--gold); }
.map-controls { display:flex; gap:5px; }
.map-control { display:grid; place-items:center; width:27px; height:24px; padding:0; border:1px solid rgba(247,240,233,.34); background:transparent; color:var(--paper); cursor:pointer; font:500 15px/1 var(--mono); transition:background .2s ease,color .2s ease,border-color .2s ease; }
.map-control:hover,.map-control:focus-visible { border-color:var(--gold); background:var(--gold); color:var(--ink); outline:0; }
.map-node,.map-core { transition:opacity .24s ease,top .58s ease,bottom .58s ease,left .58s ease,right .58s ease; }
.map-stage.is-changing .map-node,.map-stage.is-changing .map-core { opacity:0; }
.map-stage.is-changing .map-line { animation-play-state:paused; opacity:.06; }
.map-stage[data-view="product"] .node-human { top:12%; left:13%; }.map-stage[data-view="product"] .node-product { top:16%; right:7%; }.map-stage[data-view="product"] .node-cloud { right:7%; bottom:12%; }.map-stage[data-view="product"] .node-research { bottom:11%; left:11%; }
.map-stage[data-view="cloud"] .node-human { top:18%; left:7%; }.map-stage[data-view="cloud"] .node-product { top:10%; right:15%; }.map-stage[data-view="cloud"] .node-cloud { right:8%; bottom:17%; }.map-stage[data-view="cloud"] .node-research { bottom:8%; left:18%; }
.map-stage[data-view="research"] .node-human { top:10%; left:18%; }.map-stage[data-view="research"] .node-product { top:18%; right:7%; }.map-stage[data-view="research"] .node-cloud { right:18%; bottom:8%; }.map-stage[data-view="research"] .node-research { bottom:18%; left:7%; }
.map-stage[data-view="learning"] .node-human { top:13%; left:7%; }.map-stage[data-view="learning"] .node-product { top:8%; right:10%; }.map-stage[data-view="learning"] .node-cloud { right:7%; bottom:13%; }.map-stage[data-view="learning"] .node-research { bottom:9%; left:10%; }
@media (prefers-reduced-motion:reduce){.map-progress span{transition:none}.map-node,.map-core{transition:none}}

/* Institution marks in the academic record */
.academic-timeline li { grid-template-columns:165px 112px 1fr 90px; }
.education-logo { display:block; width:52px; height:52px; object-fit:contain; object-position:center; filter:saturate(.84) contrast(.96); }
.education-logo-wide { width:104px; }
@media (max-width:800px){.academic-timeline li{grid-template-columns:56px 78px 1fr;gap:14px}.academic-timeline li>b{grid-column:3}.education-logo{width:48px;height:48px}.education-logo-wide{width:70px}}

/* Tool marks appear only where they support a stated research practice. */
.interest-tools { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; }
.interest-tools > span { display:inline-flex; align-items:center; gap:7px; min-height:29px; padding:5px 8px; border:1px solid var(--line); background:rgba(255,255,255,.42); }
.interest-tools img { display:block; width:16px; height:16px; object-fit:contain; }
.interest-tools .aws-mark { width:20px; object-position:center; }
.interest-tools b { font:500 9px var(--mono); letter-spacing:.045em; text-transform:uppercase; }

/* A warmer, less schematic first impression. */
.site-header { background:rgba(247,240,233,.74); }
.section-nav-wrap { position:fixed; right:0; bottom:max(18px, env(safe-area-inset-bottom)); left:0; z-index:30; pointer-events:none; }
.section-nav { width:min(1440px, calc(100% - (var(--site-gutter) * 2))); min-height:62px; display:flex; align-items:stretch; justify-content:center; gap:0; padding:0; margin-inline:auto; overflow-x:auto; border:1px solid rgba(23,36,59,.16); border-radius:15px; background:rgba(255,255,255,.96); box-shadow:0 14px 34px rgba(23,36,59,.15); pointer-events:auto; scrollbar-width:none; }.section-nav::-webkit-scrollbar { display:none; }
.section-nav a { flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; position:relative; min-height:60px; padding:12px 10px; border-right:1px solid rgba(23,36,59,.14); color:var(--muted); font:500 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; transition:background .2s ease,color .2s ease; }.section-nav a:last-child { border-right:0; }.section-nav a:first-child { border-radius:14px 0 0 14px; }.section-nav a:last-child { border-radius:0 14px 14px 0; }.section-nav-icon { display:inline-grid; place-items:center; width:14px; height:14px; margin-right:7px; color:#d60335; font:500 13px/1 var(--sans); }.section-nav a:hover { color:var(--ink); background:#f8eeee; }.section-nav a.active { color:#fff; background:#d60335; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }.section-nav a.active .section-nav-icon { color:#fff; }
.header-context { margin-left:12px; font:500 11px var(--serif); letter-spacing:0; text-transform:none; }
.main-nav { gap:19px; padding:0; border:0; background:transparent; }
.main-nav a { padding:7px 0; font:600 13px var(--sans); letter-spacing:-.01em; text-transform:none; }
.main-nav a:hover,.main-nav a.active { background:transparent; color:var(--gold); }
.main-nav a.active { border-bottom:1px solid var(--gold); }
.cv-link { border-color:#d60335; background:#d60335; color:#fff; font-size:10px; }.cv-link:hover { border-color:#a90229; background:#a90229; color:#fff; }
.header-socials { display:flex; align-items:center; gap:6px; margin-left:auto; }.header-social { display:grid; place-items:center; width:31px; height:31px; border:1px solid var(--line); border-radius:50%; color:var(--ink); transition:background .2s ease,color .2s ease,border-color .2s ease; }.header-social svg { width:14px; height:14px; }.header-social:hover { border-color:#d60335; background:#d60335; color:#fff; }
.hero { animation:none; background:radial-gradient(circle at 81% 22%,rgba(174,126,60,.16),transparent 26%),radial-gradient(circle at 13% 84%,rgba(255,255,255,.88),transparent 32%),var(--paper); }
.system-eyebrow { color:var(--muted); font-size:11px; letter-spacing:.045em; }
.hero h1 { letter-spacing:-.065em; }
.hero-copy > .eyebrow,.hero-copy h1,.hero-copy .hero-intro,.hero-copy .hero-principle { transition:opacity .22s ease,transform .22s ease; }
.hero-copy.is-changing > .eyebrow,.hero-copy.is-changing h1,.hero-copy.is-changing .hero-intro,.hero-copy.is-changing .hero-principle { opacity:.12; transform:translateY(5px); }
.hero-intro { color:#555b64; line-height:1.5; }
.hero-principle { max-width:550px; color:#555b64; font:500 15px/1.45 var(--serif); }
.hero-principle span { color:var(--gold); font:500 10px var(--mono); }
.hero-map { background:#202b3a; box-shadow:9px 10px 0 rgba(174,126,60,.42); }
.map-node { text-transform:none; font-size:10px; letter-spacing:.02em; }
.map-current li span { letter-spacing:.035em; text-transform:none; }
.map-control { border-color:rgba(247,240,233,.28); border-radius:50%; width:25px; height:25px; }
@media (max-width:800px){.main-nav{gap:12px}.main-nav a{font-size:14px}.hero{background:radial-gradient(circle at 85% 4%,rgba(174,126,60,.14),transparent 35%),var(--paper)}.header-socials{display:none}.section-nav-wrap{bottom:max(10px, env(safe-area-inset-bottom))}.section-nav{width:calc(100% - (var(--site-gutter) * 2));min-height:54px;justify-content:flex-start;border-radius:13px}.section-nav a{flex:0 0 auto;min-height:52px;padding:10px 12px;font-size:9px}.section-nav-icon{width:12px;height:12px;margin-right:5px;font-size:12px}}

/* An editorial pause that brings the person behind the work into view. */
.speaking-feature { min-height:590px; display:flex; align-items:center; padding:clamp(58px,8vw,120px) var(--site-gutter); background-image:linear-gradient(90deg,rgba(247,240,233,.97) 0%,rgba(247,240,233,.88) 31%,rgba(247,240,233,.33) 54%,rgba(247,240,233,0) 72%),url("assets/photos/tariq-hero-image.png"); background-size:cover; background-position:center; }
.speaking-copy { width:min(560px,100%); }
.speaking-copy h2 { margin:0 0 22px; font-size:clamp(40px,4.7vw,70px); }
.speaking-copy > p:not(.eyebrow) { max-width:480px; margin-bottom:27px; color:#555b64; font-size:18px; }
.speaking-copy .text-link { color:var(--ink); }
@media (max-width:800px){.speaking-feature{min-height:540px;align-items:flex-start;background-image:linear-gradient(90deg,rgba(247,240,233,.96) 0%,rgba(247,240,233,.88) 52%,rgba(247,240,233,.38) 100%),url("assets/photos/tariq-hero-image.png");background-position:69% center}.speaking-copy h2{font-size:clamp(38px,10vw,56px)}.speaking-copy>p:not(.eyebrow){font-size:16px}}

/* A contextual, uneven brand ecosystem rather than an anonymous logo strip. */
.home-brand-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.home-brand-card { position:relative; min-height:286px; display:flex; flex-direction:column; padding:24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.38); overflow:hidden; transition:transform .24s ease,background .24s ease,box-shadow .24s ease; }
.home-brand-card:hover { z-index:1; transform:translateY(-5px); background:var(--white); box-shadow:0 9px 20px rgba(23,36,59,.1); }
.home-brand-card:nth-child(-n+3) { grid-column:span 2; }.home-brand-card:nth-child(n+4) { grid-column:span 3; }
.brand-kind { color:var(--gold); font:500 9px var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.home-brand-card figure { height:103px; display:grid; place-items:center; margin:18px 0 18px; padding:10px; background:transparent; }
.home-brand-card img { display:block; max-width:100%; max-height:72px; object-fit:contain; mix-blend-mode:multiply; filter:grayscale(1) contrast(.88); transition:filter .24s ease,transform .24s ease; }
.home-brand-card:hover img { filter:grayscale(0) contrast(1); transform:scale(1.025); }
.home-brand-card div { padding-right:28px; }.home-brand-card strong { display:block; margin-bottom:4px; font:600 21px/1.05 var(--serif); letter-spacing:-.035em; }.home-brand-card small { color:var(--muted); font-size:12px; }
.home-brand-card > b { position:absolute; right:24px; bottom:25px; color:var(--gold); font-size:21px; font-weight:400; }
.brand-iql { background:#f1e4d7; }.brand-bio { background:#f7f2e9; }.brand-server { background:#f4eee5; }.brand-epaper { background:#ede9ed; }.brand-qasai { background:#e8f0eb; }
@media (max-width:800px){.home-brand-grid{grid-template-columns:1fr}.home-brand-card:nth-child(n){grid-column:auto;min-height:225px;padding:22px}.home-brand-card figure{height:82px;margin:14px 0}.home-brand-card strong{font-size:20px}.home-brand-card>b{right:22px;bottom:22px}}

/* A quieter, personal close before the footer. */
.closing-photo { min-height:480px; display:flex; align-items:center; padding:clamp(54px,7vw,105px) var(--site-gutter); background-image:linear-gradient(90deg,rgba(247,240,233,.96) 0%,rgba(247,240,233,.84) 34%,rgba(247,240,233,.28) 56%,rgba(247,240,233,0) 74%),url("assets/photos/IMG_4524.JPG"); background-size:cover; background-position:center; }
.closing-photo-copy { width:min(520px,100%); }
.closing-photo-copy h2 { margin:0 0 20px; font-size:clamp(38px,4.4vw,65px); }
.closing-photo-copy > p:not(.eyebrow) { max-width:470px; margin:0; color:#555b64; font-size:17px; }
.closing-photo-copy .button { margin-top:28px; }
@media (max-width:800px){.closing-photo{min-height:515px;align-items:flex-start;background-image:linear-gradient(90deg,rgba(247,240,233,.96) 0%,rgba(247,240,233,.85) 57%,rgba(247,240,233,.3) 100%),url("assets/photos/IMG_4524.JPG");background-position:62% center}.closing-photo-copy h2{font-size:clamp(37px,10vw,54px)}.closing-photo-copy>p:not(.eyebrow){font-size:16px}}

/* A direct, human point of contact rather than another abstract endpoint. */
.contact-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.72fr); align-items:center; gap:clamp(44px,7vw,120px); }
.contact-hero-copy { max-width:670px; }
.contact-portrait { position:relative; min-height:410px; margin:0; overflow:hidden; background:var(--paper-deep); box-shadow:10px 11px 0 rgba(174,126,60,.28); }
.contact-portrait::after { content:""; position:absolute; inset:16px; border:1px solid rgba(247,240,233,.72); pointer-events:none; }
.contact-portrait img { display:block; width:100%; height:100%; min-height:410px; object-fit:cover; object-position:54% center; filter:saturate(.84) contrast(.96); }
.contact-portrait figcaption { position:absolute; z-index:1; right:28px; bottom:26px; display:grid; gap:4px; color:var(--paper); font:500 10px var(--mono); letter-spacing:.07em; text-align:right; text-transform:uppercase; text-shadow:0 1px 8px rgba(23,36,59,.65); }
.contact-portrait figcaption span { color:#f0cd96; font-size:8px; }
@media (max-width:800px){.contact-hero{grid-template-columns:1fr;gap:40px}.contact-hero-copy{max-width:none}.contact-portrait{min-height:345px;width:min(100%,510px)}.contact-portrait img{min-height:345px;object-position:52% center}.contact-portrait figcaption{right:24px;bottom:23px}}

/* The map and written introduction change together, while keeping the original composition. */
.hero { grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr); }
.hero-map { order:0; }
@media (max-width:800px){.hero{grid-template-columns:1fr}.hero-map{order:0}}

/* Header calligraphic lockup. */
@media (max-width:800px){.wordmark img{width:42px;height:42px}.wordmark img.profile-badge{width:44px;height:44px}}

/* A quiet Indo-Islamic jaali layer, confined to the homepage hero. */
.hero { isolation:isolate; overflow:hidden; }
.hero::before { content:""; position:absolute; z-index:0; inset:0; background-image:linear-gradient(105deg,rgba(247,240,233,.34) 0%,rgba(247,240,233,.06) 54%,rgba(247,240,233,.2) 100%),url("assets/identity/mughal-hero-background.png"); background-size:cover; background-repeat:no-repeat; background-position:center; opacity:.8; pointer-events:none; }
.hero::after { content:""; position:absolute; z-index:0; inset:0 auto 0 0; width:min(66%,940px); background:linear-gradient(90deg,var(--paper) 0%,rgba(247,240,233,.96) 43%,rgba(247,240,233,.66) 70%,rgba(247,240,233,0) 100%); pointer-events:none; }
.hero-copy,.hero-map { position:relative; z-index:1; }
@media (max-width:800px){.hero::before{opacity:.62;background-position:58% center}.hero::after{width:100%;background:linear-gradient(90deg,rgba(247,240,233,.95) 0%,rgba(247,240,233,.78) 58%,rgba(247,240,233,.2) 100%)}}

/* The interactive map presents itself as a small working application. */
.hero-map { padding:0; border:1px solid rgba(247,240,233,.23); border-radius:18px; box-shadow:9px 10px 0 rgba(174,126,60,.34); }
.map-window-bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:48px; margin:0; padding:0 17px; border-bottom:1px solid rgba(247,240,233,.14); border-radius:17px 17px 0 0; background:rgba(10,18,31,.46); }
.map-window-controls { display:flex; gap:7px; }
.map-window-controls i { display:block; width:11px; height:11px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(23,36,59,.24); }
.window-close { background:#ff5f57; }.window-minimize { background:#febc2e; }.window-expand { background:#28c840; }
.map-window-title { grid-column:2; min-width:0; overflow:hidden; color:#ede8e0; font:500 15px var(--serif); letter-spacing:-.01em; text-overflow:ellipsis; white-space:nowrap; }
.map-window-actions { grid-column:3; justify-self:end; display:flex; align-items:center; gap:12px; }
.map-window-actions > b { color:var(--gold); font:500 9px var(--mono); letter-spacing:.08em; white-space:nowrap; }
.map-window-actions .map-progress { gap:4px; }
.map-window-actions .map-progress span { width:13px; }
.map-window-actions .map-progress span.active { width:24px; }
.map-window-actions .map-controls { gap:4px; }
.map-window-actions .map-control { width:24px; height:22px; }
.map-stage { margin:0; border:0; }
.map-stage::before,.map-stage::after { display:none; }
.map-current { padding:12px 22px 13px; }
@media (max-width:600px){.map-window-actions{gap:8px}.map-window-actions .map-progress{display:none}.map-window-title{font-size:13px}}
@media (max-width:800px){.hero-map{padding:0;border-radius:14px;box-shadow:7px 8px 0 rgba(174,126,60,.34)}.map-window-bar{min-height:43px;margin:0;padding:0 14px;border-radius:13px 13px 0 0}.map-current{padding:12px 17px 13px}}

/* The left rail of the personal note becomes a quiet desk of current practice. */
.personal-note { grid-template-columns:496px minmax(0,700px); gap:56px; }
.personal-work-drawing { position:relative; width:276px; max-width:100%; margin:30px 0 0 -12px; }
.personal-work-drawing img { display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.personal-collaboration-illustration { width:100%; max-width:496px; margin:15px 0 0; overflow:hidden; background:var(--white); }
.personal-collaboration-illustration img { display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.paper-label { position:absolute; z-index:1; padding:2px 4px; color:var(--ink); background:rgba(255,255,255,.68); font:500 clamp(6px,.61vw,9px)/1.1 var(--mono); letter-spacing:.015em; text-align:center; white-space:nowrap; }
.paper-iql { top:9%; left:28%; transform:translateX(-50%); }.paper-cloud { top:9%; left:74%; transform:translateX(-50%); }.paper-bio { top:35.4%; left:50%; transform:translateX(-50%); }.paper-research { top:64%; left:24%; transform:translateX(-50%); }.paper-publications { top:64%; left:74%; transform:translateX(-50%); }
@media (max-width:800px){.personal-note{grid-template-columns:1fr;gap:28px}.personal-work-drawing{width:min(285px,100%);margin:26px 0 0}.personal-collaboration-illustration{width:min(350px,100%);margin:26px 0 0}.paper-label{font-size:8px}}

/* A live reading shelf, sourced from Tariq's own WordPress journal. */
.writing-feed-section { padding:92px 0 115px; background:rgba(255,255,255,.35); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.writing-feed { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.writing-feed article { min-height:280px; display:flex; flex-direction:column; padding:26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white); }
.writing-feed article:hover { background:#fff8f8; }
.writing-feed-meta { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font:500 9px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.writing-feed h3 { margin:38px 0 14px; font-size:27px; line-height:1.08; }
.writing-feed-excerpt { margin:0; color:var(--muted); font-size:13px; }
.writing-feed article a { margin-top:auto; padding-top:24px; color:#d60335; font:600 11px var(--sans); }
.writing-feed-loading { grid-column:1/-1; min-height:160px; display:flex; align-items:center; justify-content:center; gap:12px; margin:0; padding:38px; color:var(--muted); font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.writing-feed-spinner { width:18px; height:18px; border:2px solid rgba(174,126,60,.22); border-top-color:var(--gold); border-radius:50%; animation:writing-feed-spin .75s linear infinite; }
@keyframes writing-feed-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){.writing-feed-spinner{animation:none;border-color:var(--gold);}}
.writing-feed-link { margin-top:25px; }
.blog-intro { margin-top:48px; }.blog-feed-section { padding-top:40px; border-top:0; }.blog-feed-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }.blog-feed-heading > p:last-child { margin:0; color:var(--muted); font:500 10px var(--mono); letter-spacing:.07em; text-transform:uppercase; }
@media (max-width:800px){.writing-feed-section{padding:65px 0 80px}.writing-feed{grid-template-columns:1fr}.writing-feed article{min-height:220px;padding:24px}.writing-feed h3{margin-top:27px;font-size:25px}.blog-feed-section{padding-top:25px}.blog-feed-heading{display:block}.blog-feed-heading>p:last-child{margin-top:12px}}

/* Preserve matching outer gutters in the Evidence of Work metrics. */
@media (max-width:800px){.metric-grid article:nth-child(3){padding-left:27px}}

/* Detailed work-history entries retain the editorial timeline's reading rhythm. */
.career-list--detailed article div > p:not(.eyebrow), .career-list--detailed ul { max-width:650px; color:var(--muted); }
.career-list--detailed article div > p:not(.eyebrow) { margin:0 0 14px; }
.career-list--detailed ul { margin:0 0 14px; padding-left:1.2em; }
.career-list--detailed li + li { margin-top:5px; }
.career-list--detailed .career-skills { color:var(--gold); font:500 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.career-list--detailed .career-logo { float:right; width:84px; height:54px; margin:0 0 12px 22px; object-fit:contain; mix-blend-mode:multiply; }
.career-list--detailed .career-logo--institute { width:58px; height:58px; }
.career-list--detailed .career-logo--badge { display:grid; place-items:center; padding:8px; border:1px solid var(--line); background:var(--paper-deep); color:var(--ink); font:500 10px/1 var(--mono); letter-spacing:.06em; text-align:center; text-transform:uppercase; }

/* Mobile navigation becomes a compact, tactile control panel. */
@media (max-width:800px){
  .site-header { isolation:isolate; }
  .menu-button { display:inline-flex; align-items:center; gap:8px; min-height:38px; margin-left:auto; padding:0 11px; border:1px solid rgba(23,36,59,.24); border-radius:999px; background:rgba(255,255,255,.66); font-size:10px; transition:background .22s ease,color .22s ease,border-color .22s ease; }
  .menu-button::before { content:"☰"; color:var(--gold); font:500 15px/1 var(--sans); }
  .menu-button[aria-expanded="true"] { border-color:var(--ink); background:var(--ink); color:var(--paper); }
  .menu-button[aria-expanded="true"]::before { content:"×"; color:#e8bd7d; font-size:20px; }
  .main-nav { display:flex; visibility:hidden; top:calc(100% + 12px); right:var(--site-gutter); left:var(--site-gutter); gap:0; padding:8px; overflow:hidden; border:1px solid rgba(23,36,59,.18); border-radius:18px; background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(247,240,233,.96)); box-shadow:0 20px 45px rgba(23,36,59,.18),0 0 0 6px rgba(174,126,60,.08); opacity:0; pointer-events:none; transform:translateY(-10px) scale(.98); transform-origin:top right; transition:opacity .22s ease,transform .22s ease,visibility .22s step-end; }
  .main-nav::before { content:"Navigate"; display:block; width:100%; padding:8px 10px 11px; color:var(--gold); font:500 9px var(--mono); letter-spacing:.14em; text-transform:uppercase; }
  .main-nav.is-open { display:flex; visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0) scale(1); transition:opacity .22s ease,transform .22s ease,visibility 0s; }
  .main-nav a { display:grid; grid-template-columns:28px 1fr 18px; align-items:center; width:100%; min-height:47px; padding:0 10px; border-bottom:1px solid rgba(23,36,59,.1); color:var(--ink); font:600 14px var(--sans); letter-spacing:0; text-transform:none; }
  .main-nav a::after { display:block; width:auto; height:auto; position:static; background:transparent; color:var(--gold); content:"↗"; font:400 18px/1 var(--sans); opacity:.45; transition:opacity .2s ease,transform .2s ease; }
  .main-nav a::before { content:counter(site-nav, decimal-leading-zero); counter-increment:site-nav; color:var(--muted); font:500 9px var(--mono); letter-spacing:.04em; }
  .main-nav { counter-reset:site-nav; }
  .main-nav a:last-child { border-bottom:0; }
  .main-nav a:hover,.main-nav a.active { background:rgba(174,126,60,.11); color:var(--ink); }
  .main-nav a:hover::after,.main-nav a.active::after { opacity:1; transform:translate(2px,-2px); }
  .main-nav a.active::before { color:#d60335; }
}

/* Desktop navigation reads as a compact system command bar. */
@media (min-width:801px){
  .main-nav { gap:2px; padding:5px; border:1px solid rgba(23,36,59,.16); border-radius:999px; background:rgba(255,255,255,.56); box-shadow:0 8px 22px rgba(23,36,59,.06); counter-reset:site-nav; }
  .main-nav a { display:inline-flex; align-items:center; gap:7px; padding:9px 10px; border-radius:999px; color:var(--ink); font:500 10px var(--mono); letter-spacing:.045em; text-transform:uppercase; transition:background .2s ease,color .2s ease,box-shadow .2s ease; }
  .main-nav a::before { content:counter(site-nav, decimal-leading-zero); counter-increment:site-nav; color:var(--gold); font-size:8px; opacity:.85; }
  .main-nav a::after { display:none; }
  .main-nav a:hover { background:rgba(174,126,60,.13); color:var(--ink); }
  .main-nav a.active { background:var(--ink); color:var(--paper); box-shadow:0 3px 9px rgba(23,36,59,.18); }
  .main-nav a.active::before { color:#e8bd7d; }
}