:root { --bg:#111111; --panel:#1a1a1a; --ink:#eeeeee; --muted:#a7a7a7; --line:#353535; --accent:#cacaca}
* { box-sizing:border-box}
html { scroll-behavior:smooth; scroll-padding-top:100px}
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Manrope',sans-serif; line-height:1.65}
a { color:inherit; text-decoration:none}
button,input { font:inherit}
a,button,input {  -webkit-tap-highlight-color:transparent}
button,a { touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:5px}
::selection { background:var(--accent); color:var(--bg)}
.wrap { width:min(1240px,calc(100% - 80px)); margin:auto}
.skip { position:fixed; top:-100px; z-index:100; background:var(--accent); color:#111111; padding:12px}
.skip:focus { top:8px}
.masthead { position:sticky; top:0; z-index:20; background:#111111f2; backdrop-filter:blur(16px); border-bottom:1px solid var(--line)}
.header-row { height:90px; display:flex; align-items:center; justify-content:space-between; gap:30px}
.wordmark { display:flex; align-items:center; gap:12px; font-weight:700; font-size:21px; letter-spacing:-.8px; line-height:1.1}
.wordmark img { width:41px; height:41px; object-fit:contain}
.wordmark small { display:block; font-size:9px; letter-spacing:3.6px; margin-top:6px; font-weight:400}
.navigation { display:flex; align-items:center; gap:30px; font-size:13px}
.navigation a:hover,.navigation [aria-current] { color:var(--accent)}
.navigation .contact-link { border:1px solid #666666; border-radius:30px; padding:10px 20px}
.menu { display:none; background:transparent; color:var(--ink); border:1px solid var(--line); padding:8px 14px; border-radius:20px}
.eyebrow { text-transform:uppercase; font-size:11px; letter-spacing:2px; color:var(--accent); font-weight:600}
.hero { padding:85px 0 40px}
.hero-top { display:flex; justify-content:space-between; align-items:center}
.availability { font-size:11px; color:var(--muted); display:flex; gap:8px; align-items:center}
.availability:before { content:''; height:6px; width:6px; border-radius:50%; background:var(--accent)}
h1,h2,h3,p { margin-top:0}
h1 { font-size:clamp(62px,7.8vw,110px); line-height:1.02; letter-spacing:-5px; font-weight:500; margin:32px 0}
em { font-family:'Space Grotesk',serif; font-weight:400; color:var(--accent)}
.hero-layout { display:grid; grid-template-columns:1.25fr .75fr; gap:50px; align-items:end}
.lead { font-size:17px; color:var(--muted); max-width:470px}
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin:30px 0}
.pill { display:inline-flex; align-items:center; gap:35px; background:var(--accent); color:#191919; border:0; border-radius:40px; padding:14px 24px; font-size:13px; font-weight:600}
.text-link { font-size:13px; border-bottom:1px solid #727272; padding:8px 0}
.hero-note { border-top:1px solid var(--line); display:flex; justify-content:space-between; margin-top:50px; padding:20px 0; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:1.5px}
.ecosystem-art { height:350px; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:5px; background:#0c0c0c url('/banner.png') center 49%/cover no-repeat}
.art-caption { position:absolute; left:34px; bottom:28px; font-size:12px; letter-spacing:1px; max-width:260px; color:#e0e0e0}
.art-caption strong { font-size:28px; font-weight:400; line-height:1.2; display:block; margin-bottom:8px}
.section { padding:95px 0; border-bottom:1px solid var(--line)}
.section-head { display:flex; justify-content:space-between; align-items:end; gap:35px; margin-bottom:40px}
.section-head h2,.bio h2,.contact h2 { font-size:clamp(38px,4.7vw,64px); line-height:1.1; letter-spacing:-2px; font-weight:500; margin-bottom:0}
.section-head p { max-width:370px; color:var(--muted); font-size:14px; margin-bottom:0}
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feature { background:var(--panel); border:1px solid var(--line); border-radius:5px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s,border-color .2s}
.feature:hover { transform:translateY(-4px); border-color:#7d7d7d}
.product-visual { height:215px; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 100%,#393939,transparent 75%); position:relative; overflow:hidden}
.product-visual:before { content:''; width:230px; height:230px; border:1px solid #66666644; border-radius:50%; position:absolute}
.product-visual img { height:102px; width:102px; object-fit:contain; z-index:1}
.product-visual .glyph { font-family:'Space Grotesk',serif; font-size:98px; color:var(--accent)}
.feature-copy { padding:27px}
.feature-copy h3 { font-size:25px; letter-spacing:-1px; margin-bottom:12px}
.feature-copy p { font-size:14px; color:var(--muted); margin-bottom:25px}
.tag { font-size:10px; letter-spacing:1.3px; text-transform:uppercase; color:var(--accent)}
.feature-bottom { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:18px; font-size:12px}
.research-list a { display:grid; grid-template-columns:70px 1fr 1fr 30px; gap:25px; align-items:center; padding:28px 0; border-top:1px solid var(--line)}
.research-list a:hover h3 { color:var(--accent)}
.research-list span,.research-list p { font-size:13px; color:var(--muted); margin:0}
.research-list h3 { font-size:23px; font-weight:500; margin:0}
.bio { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center}
.monogram { min-height:360px; border:1px solid var(--line); background:repeating-linear-gradient(0deg,transparent,transparent 39px,#39393944 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,#39393944 40px); display:flex; align-items:center; justify-content:center; position:relative}
.monogram b { font-family:'Space Grotesk',serif; font-weight:400; font-size:180px; letter-spacing:-18px; color:var(--accent)}
.monogram span { position:absolute; bottom:24px; left:28px; font-size:10px; text-transform:uppercase; letter-spacing:2px}
.bio p { color:var(--muted)}
.bio h2 { margin-bottom:25px}
.contact { padding:90px 0}
.contact-row { display:flex; justify-content:space-between; align-items:center; gap:30px}
.contact p { color:var(--muted); margin-top:22px}
.footer { border-top:1px solid var(--line); padding:30px 0}
.footer-row { display:flex; justify-content:space-between; gap:25px; flex-wrap:wrap; font-size:11px; color:var(--muted)}
.footer-links { display:flex; gap:22px}
.personal-hero h1 { font-size:clamp(62px,8.2vw,116px)}
.personal-subtitle { font-family:'Space Grotesk',serif; color:var(--accent); font-size:32px; line-height:1.2}
.personal-aside { border-left:1px solid var(--line); padding-left:30px; margin-bottom:30px}
.personal-aside p { font-size:14px; color:var(--muted)}
.personal-aside strong { display:block; font-size:12px; letter-spacing:1px; margin-bottom:16px}
.story-grid { display:grid; grid-template-columns:.6fr 1.4fr; gap:90px}
.story-copy { font-size:18px; max-width:760px; color:#c8c8c8}
.story-copy p+p { margin-top:24px}
.timeline { margin-top:40px}
.timeline article { display:grid; grid-template-columns:90px 1fr; border-top:1px solid var(--line); gap:22px; padding:22px 0}
.timeline h3 { font-size:17px; font-weight:500; margin:0}
.timeline p { font-size:14px; color:var(--muted); margin:7px 0 0}
.filters { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0}
.filter { border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:30px; padding:9px 18px; font-size:12px; cursor:pointer}
.filter[aria-pressed=true] { color:#171717; background:var(--accent); border-color:var(--accent)}
.search { background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:4px; padding:15px 18px; width:100%; max-width:450px}
.search-label { display:block; font-size:12px; color:var(--muted); margin-bottom:8px}
.count { font-size:12px; color:var(--muted); margin:20px 0}
.catalogue { display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.catalogue article { border:1px solid var(--line); padding:27px; background:var(--panel); display:flex; flex-direction:column; min-height:265px; border-radius:4px}
.catalogue article[hidden] { display:none}
.catalogue h3 { font-size:23px; font-weight:500; line-height:1.2; letter-spacing:-.6px; margin:17px 0}
.catalogue p { font-size:13px; color:var(--muted); flex:1}
.catalogue .status { border-top:1px solid var(--line); padding-top:14px; font-size:11px; color:#c6c6c6; display:flex; justify-content:space-between; gap:12px}
.catalogue a:hover { text-decoration:underline}
.empty { padding:35px 0; color:var(--muted)}
.method { display:grid; grid-template-columns:repeat(5,1fr); gap:24px}
.method article { border-top:1px solid var(--line); padding-top:20px}
.method span { font-size:12px; color:var(--accent)}
.method h3 { margin:22px 0 12px; font-size:19px}
.method p { font-size:13px; color:var(--muted)}
.education { display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
.education div { border-top:1px solid var(--line); padding:20px 0; display:flex; justify-content:space-between; gap:20px; font-size:14px}
.education span { font-size:12px; color:var(--muted); white-space:nowrap}
.source-note { font-size:12px; color:var(--muted); margin-top:28px; max-width:750px}
noscript p { padding:16px; border:1px solid var(--line)}

@media(min-width:1500px) { .hero { padding-top:100px}
}
@media(max-width:1000px) { .wrap { width:calc(100% - 48px)}
.navigation { gap:18px}
.hero-layout { gap:25px}
h1 { letter-spacing:-3px}
.project-grid,.catalogue { grid-template-columns:repeat(2,1fr)}
.project-grid .feature:last-child { grid-column:1/-1}
.method { grid-template-columns:repeat(3,1fr)}
.bio { gap:40px}
.story-grid { gap:35px}
}
@media(max-width:720px) { .wrap { width:calc(100% - 40px)}
.header-row { height:74px}
.wordmark { font-size:18px}
.menu { display:block}
.navigation { display:none; position:absolute; top:74px; left:0; right:0; background:var(--bg); padding:24px; align-items:stretch; border-bottom:1px solid var(--line)}
.navigation.open { display:flex; flex-direction:column; gap:20px}
.hero { padding-top:45px}
.availability { display:none}
.hero-layout,.bio,.story-grid { grid-template-columns:1fr; gap:25px}
h1,.personal-hero h1 { font-size:62px; letter-spacing:-3px; margin:28px 0}
.hero-layout .lead { font-size:16px}
.hero-note { font-size:9px; gap:20px; margin-top:25px}
.ecosystem-art { height:260px; background-position:68% center}
.art-caption { left:20px; bottom:20px; max-width:180px}
.art-caption strong { font-size:22px}
.section { padding:60px 0}
.section-head { display:block; margin-bottom:30px}
.section-head p { margin-top:20px}
.section-head h2,.bio h2,.contact h2 { font-size:42px}
.project-grid,.catalogue { grid-template-columns:1fr}
.product-visual { height:190px}
.research-list a { grid-template-columns:32px 1fr 20px; gap:12px}
.research-list p { grid-column:2; grid-row:2}
.research-list a>span:last-child { grid-column:3; grid-row:1}
.research-list h3 { font-size:20px}
.monogram { min-height:280px}
.monogram b { font-size:145px}
.contact-row { display:block}
.contact { padding:60px 0}
.contact .pill { margin-top:15px}
.personal-aside { margin:0; padding:18px 0 0; border:0; border-top:1px solid var(--line)}
.story-copy { font-size:16px}
.timeline article { grid-template-columns:60px 1fr}
.method { grid-template-columns:1fr 1fr}
.education { grid-template-columns:1fr}
.education div { font-size:13px}
.footer-row { display:block}
.footer-links { margin-top:18px; flex-wrap:wrap}
.personal-subtitle { font-size:27px}
}