/* 2026 portfolio redesign — old projects preserved, presentation rebuilt. */
:root { --bg:#09090b; --surface:#111114; --surface-2:#18181c; --text:#f5f5f4; --muted:#a1a1aa; --line:#27272a; --accent:#d4ff3f; --accent-ink:#111; --max:1120px; }
*{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.65} a{color:inherit;text-decoration:none} ul{list-style:none}
.nav{position:fixed;inset:0 0 auto;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:rgba(9,9,11,.82);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px);z-index:20}.brand{font-weight:800;font-size:1.25rem;letter-spacing:-.05em}.nav-list{display:flex;gap:1.45rem}.nav-list a{color:var(--muted);font-size:.8rem;font-weight:600;transition:color .2s}.nav-list a:hover{color:var(--text)}
.section-shell{width:min(var(--max),calc(100% - 40px));margin:0 auto}.hero{min-height:100vh;padding:150px max(20px,7vw) 90px;display:flex;align-items:center;justify-content:space-between;gap:50px;background:radial-gradient(circle at 75% 30%,#202020 0,transparent 34%),var(--bg)}.hero-content{max-width:760px}.eyebrow,.section-kicker,.project-meta,.project-era,.archive-label{font-family:"DM Mono",monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--muted)}.hero h1{margin:18px 0;font-size:clamp(4rem,9vw,8.5rem);line-height:.92;letter-spacing:-.08em}.hero h1 span,.intro h2 span,.past-intro h2 span{color:var(--accent)}.hero-copy{max-width:650px;color:var(--muted);font-size:clamp(1.05rem,2vw,1.3rem)}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:1px solid var(--line);border-radius:999px;font-weight:700;font-size:.9rem;transition:transform .2s,background .2s,color .2s}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.button-secondary{color:var(--text)}.hero-note{min-width:150px;display:grid;gap:8px;color:var(--muted);font:.7rem "DM Mono",monospace;text-align:right}.hero-note strong{color:var(--text);font-size:1.15rem}
.intro{padding:120px 0;border-top:1px solid var(--line)}.intro h2{max-width:800px;margin:18px 0;font-size:clamp(2.4rem,5vw,4.8rem);line-height:1.02;letter-spacing:-.06em}.intro>p:last-of-type{max-width:680px;color:var(--muted);font-size:1.08rem}.history-inline{display:inline-block;margin-top:28px;color:var(--accent);font-weight:700;border-bottom:1px solid var(--accent);padding-bottom:3px}
.work-section{padding:30px 0 130px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:45px}.section-heading h2{margin-top:10px;font-size:clamp(2.5rem,5vw,4.5rem);line-height:1;letter-spacing:-.06em}.section-heading>p{max-width:320px;color:var(--muted)}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.project-card{min-height:300px;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--surface);border:1px solid var(--line);border-radius:18px;transition:transform .25s,border-color .25s,background .25s}.project-card:hover{transform:translateY(-5px);border-color:#52525b;background:var(--surface-2)}.project-card.featured{min-height:420px;background:linear-gradient(145deg,#171a0d,var(--surface))}.project-card:nth-child(3){grid-column:1/-1;min-height:250px}.project-meta{display:flex;justify-content:space-between;margin-bottom:auto}.project-card h3{margin-top:30px;font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.04em}.project-card p{max-width:620px;margin:10px 0 24px;color:var(--muted)}.project-link{font-weight:700;color:var(--accent)}
.past-section{padding:130px 0;background:#f1f1ec;color:#151515}.past-section .section-kicker,.past-section .project-era{color:#666}.past-intro{max-width:850px}.archive-label{display:inline-block;margin:25px 0 10px;padding:6px 9px;border:1px solid #bbb;border-radius:5px}.past-intro h2{font-size:clamp(4rem,10vw,8.5rem);line-height:.82;letter-spacing:-.08em}.past-lead{max-width:650px;margin-top:35px;color:#555;font-size:1.1rem}.past-intro .button{margin-top:28px}.timeline{margin-top:90px;border-top:1px solid #c8c8c3}.timeline-item{display:grid;grid-template-columns:80px 1fr;gap:25px;padding:45px 0;border-bottom:1px solid #c8c8c3}.timeline-marker{font:1rem "DM Mono",monospace;color:#777}.timeline-card{max-width:800px}.timeline-card h3{margin:8px 0 12px;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.05em}.timeline-card p:not(.project-era){color:#555}.timeline-actions{display:flex;gap:25px;flex-wrap:wrap;margin-top:22px;font-weight:700}.timeline-actions a{border-bottom:1px solid #999}.muted-card{opacity:.82}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.tags span{padding:5px 9px;border:1px solid #bbb;border-radius:999px;font:.72rem "DM Mono",monospace}.archive-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:55px;padding-top:30px;border-top:1px solid #c8c8c3}.button-light{border-color:#222;color:#111}
.principles{padding:120px 0}.principles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}.principles-grid>div{padding:28px 0;border-top:1px solid var(--line)}.principles-grid strong{font:.75rem "DM Mono",monospace;color:var(--accent)}.principles-grid h3{margin:22px 0 8px;font-size:1.25rem}.principles-grid p{color:var(--muted)}.contact-section{padding:130px 0;background:var(--surface);border-top:1px solid var(--line)}.contact-inner h2{margin:18px 0;font-size:clamp(3rem,7vw,6.5rem);line-height:.9;letter-spacing:-.07em}.contact-inner>p:not(.section-kicker){max-width:550px;color:var(--muted)}.contact-links{display:flex;flex-wrap:wrap;gap:22px;margin-top:45px}.contact-links a{color:var(--text);font-weight:600;border-bottom:1px solid #444;padding-bottom:4px}.contact-links a:hover{color:var(--accent);border-color:var(--accent)}
footer{display:flex;justify-content:space-between;gap:20px;padding:25px max(20px,4vw);color:#71717a;font-size:.8rem;border-top:1px solid var(--line)}
.history-page{background:#f1f1ec;color:#151515;min-height:100vh}.history-nav{position:sticky;top:0;z-index:20;padding:16px max(20px,5vw);display:flex;justify-content:space-between;align-items:center;background:rgba(241,241,236,.9);border-bottom:1px solid #ccc;backdrop-filter:blur(12px)}.history-nav a{font-weight:700}.history-shell{width:min(1080px,calc(100% - 40px));margin:auto}.history-hero{padding:120px 0 80px}.history-hero h1{max-width:900px;margin:15px 0;font-size:clamp(4rem,9vw,8rem);line-height:.84;letter-spacing:-.08em}.history-hero h1 span{color:#777}.history-hero p{max-width:680px;color:#555;font-size:1.1rem}.history-card{padding:55px 0;border-top:1px solid #c7c7c2}.history-card h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.05em}.history-card>p{max-width:700px;margin:10px 0 30px;color:#555}.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}.compare-panel{min-height:260px;padding:28px;border:1px solid #c7c7c2;background:#e8e8e2}.compare-panel.now{background:#151515;color:#f5f5f4;border-color:#151515}.compare-panel small{font: .7rem "DM Mono",monospace;letter-spacing:.12em}.compare-panel h3{margin:22px 0 10px;font-size:1.5rem}.compare-panel p{color:#666}.compare-panel.now p{color:#aaa}.compare-panel a{display:inline-block;margin-top:22px;font-weight:700;border-bottom:1px solid currentColor}.history-note{margin-top:18px;padding:18px;border-left:3px solid #151515;color:#555}.history-footer{padding:80px 0}
@media(max-width:760px){.nav{height:62px}.nav-list{gap:.7rem}.nav-list a{font-size:.7rem}.hero{min-height:auto;padding-top:135px;flex-direction:column;align-items:flex-start}.hero-note{text-align:left}.project-grid,.principles-grid,.compare{grid-template-columns:1fr}.project-card:nth-child(3){grid-column:auto}.section-heading,.archive-footer{align-items:flex-start;flex-direction:column}.timeline-item{grid-template-columns:40px 1fr;gap:10px}.history-hero{padding-top:90px}}
@media(max-width:480px){.nav{padding:0 14px}.brand{display:none}.nav-list{width:100%;justify-content:space-between}.section-shell,.history-shell{width:min(var(--max),calc(100% - 28px))}.hero{padding-left:14px;padding-right:14px}.hero h1{font-size:clamp(3.5rem,17vw,5.5rem)}.project-card{padding:23px}.past-section,.contact-section,.principles,.intro{padding-top:85px;padding-bottom:85px}footer{flex-direction:column}.history-card{padding:40px 0}}