@font-face { font-family:Fraunces; font-style:normal; font-weight:300 900; font-display:swap; src:url('/fonts/fraunces-latin-variable.woff2') format('woff2'); }
:root { --ink:#e9edf0; --muted:#9ba5af; --accent:#a8c6e8; --paper:#121518; --surface:#191e23; --line:#2a3138; color-scheme:dark; font:15px/1.7 Arial,Helvetica,sans-serif; color:var(--ink); background:var(--paper); }
:root[data-theme=light] { --ink:#242c34; --muted:#64717e; --accent:#355d85; --paper:#f7f8fa; --surface:#edf0f3; --line:#dbe1e7; color-scheme:light; }
*,*::before,*::after { box-sizing:border-box; }
body,h1,h2,h3,p { margin:0; }
body { overflow-wrap:anywhere; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
img { max-width:100%; height:auto; }
em { font-family:Fraunces,Georgia,serif; font-weight:450; color:var(--accent); }
section[id] { scroll-margin-top:30px; }
.wrap { width:min(1120px,calc(100% - 96px)); margin-inline:auto; }
.nav { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:100px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; font-size:17px; font-weight:600; letter-spacing:-.5px; }
.mark { width:36px; height:36px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--ink); color:var(--paper); font:29px/1 Georgia,serif; }
.mark span { color:var(--muted); }
.nav nav { display:flex; align-items:center; gap:30px; font-size:12px; color:var(--muted); }
.nav [aria-current=page] { color:var(--ink); }
#theme-toggle { display:flex; align-items:center; gap:9px; padding:9px 12px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:transparent; font:11px Arial,sans-serif; cursor:pointer; min-height:36px; }
#theme-toggle:hover { border-color:var(--muted); color:var(--ink); }
#theme-toggle>span:first-child { font-size:17px; }
.skip { position:absolute; top:-100px; left:20px; padding:8px 15px; background:var(--paper); z-index:10; }
.skip:focus { top:8px; }
.intro { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:65px; align-items:center; padding:67px 0 58px; }
.eyebrow { font:9px/1.6 ui-monospace,Consolas,monospace; letter-spacing:1.1px; color:var(--muted); }
.intro .eyebrow { display:flex; align-items:center; gap:10px; }
.status-dot { width:5px; height:5px; background:var(--accent); border-radius:50%; }
h1 { font-size:clamp(35px,4.4vw,55px); font-weight:600; line-height:1.13; letter-spacing:-2.3px; }
.intro h1 { margin-top:20px; }
.period { color:var(--accent); }
.role-line { font-size:26px; line-height:1.4; letter-spacing:-.5px; margin-top:13px; }
.intro-description { font-size:14px; line-height:1.85; color:var(--muted); max-width:680px; margin-top:21px; }
.intro-description+.intro-description { margin-top:10px; }
.intro-person { display:flex; flex-direction:column; align-items:center; padding-top:20px; }
.profile { border-radius:50%; object-fit:cover; filter:grayscale(1); outline:1px solid var(--line); outline-offset:7px; }
.person-name { margin-top:23px; font-size:13px; }
.person-location { margin-top:4px; color:var(--muted); font:9px/1.6 monospace; }
.intro-links { display:flex; flex-wrap:wrap; gap:24px; align-items:center; font-size:11px; margin-top:28px; }
.intro-links>a:not(.contact-link) { color:var(--muted); }
.contact-link { display:inline-flex; align-items:center; gap:24px; background:var(--ink); color:var(--paper); border-radius:5px; padding:10px 15px; font-weight:600; }
.contact-link:hover { background:var(--accent); color:var(--paper); }
.portfolio-layout { border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) 285px; gap:60px; padding:38px 0 55px; }
.section-heading { display:flex; align-items:flex-end; gap:20px; justify-content:space-between; padding-bottom:25px; }
h2 { font-size:27px; font-weight:500; line-height:1.3; letter-spacing:-.9px; }
.section-heading h2 { margin-top:9px; }
.count { color:var(--muted); font:8px/1.7 monospace; letter-spacing:.7px; padding-bottom:4px; white-space:nowrap; }
.project-list { list-style:none; margin:0; padding:0; }
.project-list>li { display:grid; grid-template-columns:22px minmax(0,1fr); gap:16px; padding:25px 0; border-top:1px solid var(--line); }
.project-number { color:var(--muted); font:9px/1.5 monospace; padding-top:3px; }
.project-owner { color:var(--accent); font:9px/1.7 monospace; }
.project-owner>span { color:var(--muted); font-size:8px; }
.project-list h3 { font-size:23px; font-weight:500; letter-spacing:-.6px; margin:9px 0 10px; line-height:1.3; }
.project-list h3 a { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.project-list h3 a>span { color:var(--muted); font-size:17px; }
.project-list h3 a:hover>span { color:var(--accent); }
.project-description { font-size:13px; line-height:1.8; color:var(--muted); max-width:640px; }
.project-details { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; margin-top:16px; }
.tags { display:flex; flex-wrap:wrap; gap:12px; font:8px/1.6 monospace; color:var(--muted); }
.tags span+span:before { content:'·'; margin-right:12px; }
.project-note { font:8px/1.6 monospace; color:var(--accent); }
.sidebar { border-left:1px solid var(--line); padding-left:27px; }
.sidebar-section+.sidebar-section { border-top:1px solid var(--line); margin-top:30px; padding-top:27px; }
.sidebar h2 { font-size:21px; margin:10px 0 20px; letter-spacing:-.5px; }
.sidebar .eyebrow { font-size:8px; }
.stats-list { margin:0; padding:0; list-style:none; }
.stats-list li+li { margin-top:17px; }
.stats-list a { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.stats-list a>span { color:var(--muted); font-size:10px; }
.stats-list a>span>span { font-size:9px; margin-left:4px; }
.stats-list strong { font-size:24px; line-height:1.1; font-weight:500; letter-spacing:-.8px; }
.footnote { font:8px/1.8 monospace; color:var(--muted); margin-top:19px; }
.brand-list { display:flex; flex-direction:column; gap:21px; }
.brand-link { display:flex; align-items:center; gap:12px; }
.brand-link img { object-fit:contain; border-radius:5px; flex-shrink:0; }
.brand-link strong { display:block; font-size:13px; font-weight:500; }
.brand-link strong b { font-weight:650; }
.brand-link span>span { display:block; color:var(--muted); font-size:10px; margin-top:3px; }
.about p { color:var(--muted); font-size:12px; line-height:1.9; }
.about p+p { margin-top:16px; }
.about p a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.footer { border-top:1px solid var(--line); padding:26px 0; color:var(--muted); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:17px; font-size:9px; }
.footer>div { display:flex; align-items:center; gap:14px; }
.footer-mark { font:29px/1 Georgia,serif; color:var(--ink); }
.footer-mark span { color:var(--accent); }
.footer nav { display:flex; gap:23px; }
.footer>p { width:100%; display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.studio-credit { display:inline-flex; align-items:center; }
.studio-credit img { margin-right:5px; }
.built-with { margin-left:auto; }
/* Detail pages share the design, retaining a quiet reading width. */
.detail-hero { padding:55px 0 40px; max-width:800px; }
.detail-hero h1 { margin:22px 0; font-size:50px; }
.lead { font-size:19px; line-height:1.6; }
.notice { margin-top:22px; color:var(--muted); font-size:12px; padding-left:15px; border-left:2px solid var(--line); }
.split-section { border-top:1px solid var(--line); padding:35px 0; display:grid; grid-template-columns:280px minmax(0,1fr); gap:60px; }
.section-label h2 { margin-top:12px; font-size:30px; }
.section-label>p,.split-section>div>p:not(.lead) { font-size:13px; color:var(--muted); margin:14px 0; }
.flow { margin:0; padding:0; list-style:none; }
.flow li+li { margin-top:23px; }
.flow strong { font-size:15px; font-weight:500; }
.flow p { font-size:13px; color:var(--muted); margin-top:6px; }
.role { border-bottom:1px solid var(--line); }
.role summary { cursor:pointer; display:flex; align-items:center; gap:12px; padding:15px 0; list-style:none; }
.role summary::-webkit-details-marker { display:none; }
.role summary:after { content:'+'; margin-left:auto; color:var(--accent); }
.role[open] summary:after { content:'−'; }
.role summary span { font:10px monospace; color:var(--muted); }
.role summary strong { font-size:15px; font-weight:500; }
.role>div { padding:0 0 20px 23px; }
.role h3 { font-size:17px; font-weight:500; margin-bottom:8px; }
.role p { font-size:13px; color:var(--muted); }
.role small { display:block; font:10px/1.7 monospace; color:var(--muted); margin-top:12px; }
.text-link { display:inline-block; margin-top:17px; font-size:12px; color:var(--accent); }
.prose { padding:50px 0; max-width:760px; }
.prose h1 { margin-bottom:26px; font-size:40px; }
.prose h2 { margin:30px 0 12px; font-size:24px; }
.prose p { color:var(--muted); font-size:14px; margin:12px 0; }
.prose a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
@media(max-width:1000px) { .wrap { width:calc(100% - 64px); } .portfolio-layout { gap:30px; grid-template-columns:minmax(0,1fr) 250px; } .sidebar { padding-left:22px; } .intro { gap:30px; grid-template-columns:minmax(0,1fr) 150px; } h1 { font-size:42px; } .role-line { font-size:24px; } .split-section { grid-template-columns:230px minmax(0,1fr); gap:35px; } }
@media(max-width:700px) { .wrap { width:calc(100% - 40px); } .nav { min-height:82px; } .nav nav { gap:18px; font-size:11px; } .brand>span:last-child { display:none; } #theme-label { display:none; } #theme-toggle { padding:5px 10px; } .intro { grid-template-columns:1fr; gap:0; padding:40px 0 35px; } .intro-person { display:none; } h1 { font-size:39px; letter-spacing:-1.7px; } .intro .eyebrow { font-size:8px; } .role-line { font-size:23px; } .intro-description { font-size:13px; margin-top:19px; } .intro-links { gap:20px; margin-top:24px; } .portfolio-layout { grid-template-columns:1fr; gap:30px; padding-top:28px; } .section-heading { padding-bottom:22px; } .section-heading h2 { font-size:27px; } .project-list>li { gap:11px; grid-template-columns:18px minmax(0,1fr); padding-block:23px; } .project-list h3 { font-size:22px; } .project-owner>span { display:block; margin-top:2px; } .sidebar { border-left:0; border-top:1px solid var(--line); padding:28px 0 0; } .stats-list { max-width:400px; } .sidebar h2 { font-size:23px; } .brand-list { flex-direction:row; flex-wrap:wrap; gap:25px; } .about p { font-size:13px; } .built-with { margin:6px 0 0; width:100%; } .footer { gap:17px; } .split-section { grid-template-columns:1fr; gap:22px; padding:28px 0; } .detail-hero { padding:40px 0; } .detail-hero h1 { font-size:39px; } .prose { padding:35px 0; } .prose h1 { font-size:32px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }