@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');
:root { color-scheme: light; --paper:#fff; --ink:#111; --muted:#62666b; --line:#dedfe3; --orange:#0052ff; --sans:'DM Sans',Arial,sans-serif; --serif:var(--sans); }
body { background:#fff; color:#111; }
::selection { background:#dbe6ff; color:#111; }
.wrap { max-width:1220px; }
.site-header { background:#ffffffed; border-color:#e6e7e9; backdrop-filter:blur(12px); }
.nav { height:86px; }
.brand { font-weight:650; letter-spacing:-.7px; font-size:22px; gap:11px; }
.brand-leaf { width:32px; height:38px; flex-shrink:0; transition:transform .3s; }
.brand:hover .brand-leaf { transform:rotate(-12deg); }
.nav nav { font-size:12px; gap:28px; }
.nav nav a { position:relative; }
.nav nav a:not(.nav-contact):after { content:''; position:absolute; height:1px; bottom:-6px; left:0; width:0; background:#0052ff; transition:width .25s; }
.nav nav a:hover:after { width:100%; }
.nav .nav-contact { border-color:#c5c7cb; border-radius:5px; padding:11px 16px; }
.eyebrow { color:#5e6268; font-size:10px; font-weight:550; letter-spacing:1.35px; line-height:1.6; }
.dot { background:#0052ff; box-shadow:none; }
.hero { min-height:690px; position:relative; grid-template-columns:1fr 1fr; gap:60px; padding-block:52px 70px; }
.hero-ambient { display:none; }
.hero-name { color:#71767e; font-size:11px; display:flex; gap:30px; margin-top:28px; }
.hero-name span { font-size:11px; }
.hero h1 { font-size:clamp(68px,7vw,96px); font-weight:500; line-height:.99; letter-spacing:-5px; margin:18px 0 27px; }
.hero h1 em { font-style:normal; font-weight:500; color:#111; position:relative; display:inline-block; }
.hero h1 em:after { content:''; position:absolute; bottom:-6px; left:1px; height:5px; width:105%; border:1.6px solid #0052ff; border-bottom:0; border-radius:50%; transform:rotate(-3deg); }
.hero-description { font-size:14px; color:#62666b; line-height:1.9; max-width:455px; }
.hero-description strong { color:#111; font-weight:550; }
.actions { gap:13px; flex-wrap:wrap; margin-top:28px; }
.button { background:#0052ff; color:white; border:1px solid #0052ff; border-radius:5px; min-height:48px; padding:13px 19px; font-size:13px; font-weight:550; gap:24px; box-shadow:none; letter-spacing:.1px; transition:background .2s,transform .2s; }
.button:hover { background:#003ed0; transform:translateY(-2px); }
.button span { font-size:18px; }
.button-secondary { color:#111; background:#fff; border-color:#c9ccd2; gap:12px; }
.button-secondary:hover { color:#0052ff; background:#f5f7fc; }
.button-secondary .play-symbol { font-size:10px; }
.plain-link { color:#111; font-size:12px; border-bottom:1px solid #b9bec7; padding-bottom:5px; }
.plain-link:hover { border-color:#0052ff; }
.hero-foot { color:#71767e; font-size:10px; flex-wrap:wrap; line-height:1.7; gap:8px; margin-top:28px; }
.collage { height:490px; margin-top:30px; position:relative; }
.collage-cloud { inset:8px 5px 36px 22px; border:1px solid #dedfe3; border-radius:0; background:repeating-linear-gradient(0deg,transparent,transparent 23px,#0052ff07 23px,#0052ff07 24px),repeating-linear-gradient(90deg,transparent,transparent 23px,#0052ff07 23px,#0052ff07 24px); transform:rotate(3deg); }
.hero-shot { border-radius:3px; padding:7px; background:white; box-shadow:0 10px 30px #11111112; border:1px solid #d4d7dc; }
.hero-shot img { border-radius:0; }
.hero-shot.room { width:96%; top:39px; left:-5%; height:266px; transform:rotate(-5deg); }
.hero-shot.pirate { width:66%; right:0; height:186px; bottom:20px; transform:rotate(6deg); }
.hero-sticker { right:-3%; top:-16px; width:auto; height:auto; border:0; border-radius:0; box-shadow:none; padding:12px 17px; background:#fff; color:#111; border-block:1px solid #111; transform:rotate(4deg); align-items:flex-start; gap:4px; }
.hero-sticker b { font:600 18px var(--sans); letter-spacing:-.5px; }
.hero-sticker span { font-size:9px; color:#62666b; }
.hero-tiny-icon { border-color:#fff; box-shadow:0 3px 12px #0001; top:290px; right:-2%; border-radius:13px; }
.collage-note { color:#0052ff; font:italic 17px/1.5 Georgia,serif; bottom:6px; left:-2%; transform:rotate(-5deg); }
.hand-arrow { color:#0052ff; left:25%; bottom:48px; width:52px; }
.intro-strip { border-color:#d8dade; gap:28px; padding-block:26px; }
.intro-strip p { color:#72767e; font-size:11px; line-height:1.8; }
.intro-strip strong { font-weight:450; color:#111; }
.strip-stat b { font-size:31px; font-weight:500; letter-spacing:-1.1px; }
.strip-stat span { color:#70757d; font-size:10px; line-height:1.6; }
h2 { font-size:clamp(42px,4.2vw,59px); font-weight:500; line-height:1.08; letter-spacing:-2.4px; }
h2 em { color:#0052ff; font-style:normal; font-weight:500; }
.work { padding-block:86px 68px; }
.section-title { margin-bottom:32px; align-items:flex-end; }
.section-title > p { font-size:13px; line-height:1.9; max-width:320px; color:#62666b; }
.work-toolbar { margin-bottom:34px; }
.filter { min-height:44px; font-size:11px; border-radius:4px; border:1px solid transparent; padding:9px 14px; }
.filter[aria-pressed=true] { color:#0052ff; background:#edf2ff; border-color:#d7e2ff; }
.filter:not([aria-pressed=true]):hover { background:#f1f2f4; }
.filter small { font-size:9px; margin-left:8px; }
.work-toolbar > span { font-size:10px; color:#71767e; }
.group-heading { border-color:#d8dade; padding-top:20px; }
.group-heading h3 { font-size:15px; font-weight:500; letter-spacing:-.3px; }
.group-heading p { font-size:10px; }
.project-grid { gap:48px 30px; }
.project-art { background:#f1f2f4; border:1px solid #e7e8eb; border-radius:5px; transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .4s; }
.project-card:nth-child(2) .project-art,.project-card:nth-child(4) .project-art { background:#edf1f7; }
.project-index { color:#646b75; font-size:9px; letter-spacing:.9px; top:18px; left:18px; }
.landscape .art-main,.landscape .art-secondary,.portrait .art-main,.portrait .art-secondary { border-color:white; box-shadow:0 12px 25px #1b2b3b20; }
.landscape .art-main,.landscape .art-secondary { border-radius:5px; }
.portrait .art-main,.portrait .art-secondary { border-radius:14px; }
.art-open { background:#fff; color:#111; border:1px solid #d8dbe1; width:35px; height:35px; }
.project-art:hover .art-open { color:#0052ff; transform:translate(2px,-2px); }
.project-topline { gap:8px; align-items:baseline; }
.role-label { color:#6a6f76; font-size:10px; letter-spacing:.2px; }
.download-stat { color:#0052ff; font-size:13px; font-weight:500; white-space:nowrap; }
.project-info h3 { font-size:25px; font-weight:500; letter-spacing:-.9px; margin-bottom:10px; }
.project-info > p { color:#62666b; font-size:13px; line-height:1.85; }
.project-footer { gap:10px; align-items:center; }
.source-link { color:#71767e; font-size:10px; text-decoration-color:#b8bdc5; line-height:1.7; }
.detail-button { font-size:11px; font-weight:550; color:#111; border:0; background:transparent; padding:10px 0 10px 10px; min-height:44px; white-space:nowrap; gap:12px; }
.detail-button span { color:#0052ff; font-size:17px; }
.detail-button:hover { color:#0052ff; }
.contributions .project-art { border-radius:5px; }
.contributions .project-info h3 { font-size:21px; line-height:1.25; min-height:52px; letter-spacing:-.6px; }
.contributions .project-info > p { min-height:70px; font-size:12px; }
.contributions .download-stat { font-size:12px; }
.contributions .role-label { font-size:9px; }
.data-note { color:#71767e; font-size:10px; line-height:1.9; }
.about { background:#f8f9fa; border-radius:0; border-block:1px solid #e4e6e9; padding-block:76px; }
.about-grid { gap:100px; }
.about h2 { font-size:48px; }
.about-copy { color:#62666b; font-size:14px; line-height:1.9; }
.capabilities { gap:30px; }
.capability-icon { width:auto; height:auto; display:block; background:transparent; border-radius:0; color:#0052ff; font:14px var(--sans); margin-bottom:17px; }
.capabilities article { border-top:1px solid #cfd3da; padding-top:20px; }
.capabilities h3 { font-size:18px; font-weight:500; letter-spacing:-.4px; }
.capabilities p { font-size:13px; color:#62666b; line-height:1.9; }
.experience h2 { font-size:47px; }
.timeline h3 { font-size:20px; font-weight:500; letter-spacing:-.4px; }
.timeline .org { color:#0052ff; font-size:12px; }
.timeline p { font-size:12px; color:#62666b; }
.timeline time { color:#71767e; font-size:10px; }
.education-line h3 { font-size:16px; font-weight:500; letter-spacing:-.3px; }
.education-line p { font-size:12px; color:#62666b; }
.contact { background:#f8f9fa; border:1px solid #dedfe3; border-radius:0; padding:48px 50px 30px; }
.contact:after { content:''; position:absolute; width:160px; height:180px; right:9%; top:60px; background:url('maple-mark.svg') center/contain no-repeat; opacity:.16; transform:rotate(18deg); }
.contact h2 { font-size:68px; line-height:1.02; font-weight:500; letter-spacing:-3px; }
.contact > p:not(.eyebrow) { color:#62666b; font-size:14px; max-width:440px; }
.email { color:#111; border-color:#b4bac5; font-size:26px; font-weight:450; }
.contact-bottom { border-color:#d9dce2; font-size:12px; }
.socials small { color:#62666b; border-color:#c3c8d2; border-radius:3px; }
footer { color:#71767e; font-size:10px; }
.footer-handle { font-weight:400; color:#71767e; }
dialog { background:#fff; border:1px solid #d8dce3; border-radius:9px; box-shadow:0 25px 100px #1112; }
dialog::backdrop { background:#11111175; backdrop-filter:blur(4px); }
.dialog-close { width:40px; height:40px; background:#f1f2f4; color:#111; }
.dialog-top h2 { font-size:28px; font-weight:500; }
.dialog-top p { color:#62666b; font-size:11px; }
.dialog-description { font-size:14px; }
.dialog-metrics b { color:#0052ff; font-size:31px; font-weight:500; }
.dialog-metrics small { color:#62666b; font-size:11px; }
.dialog-caption { color:#71767e; font-size:10px; }
.dialog-gallery img { border-radius:4px; }
.dialog-actions { gap:20px; }
.dialog-actions > a:last-child { font-size:11px; }
@media(min-width:1600px) { .hero h1 { font-size:96px; } .hero { gap:70px; } .collage { height:500px; } .hero-shot.room { height:280px; } .hero-shot.pirate { height:195px; } }
@media(max-width:1100px) { .hero { gap:35px; min-height:630px; } .hero h1 { font-size:76px; letter-spacing:-4px; } .hero-sticker { right:-1%; } .collage { height:440px; } .hero-shot.room { height:230px; } .hero-shot.pirate { height:170px; } .hero-tiny-icon { top:250px; } .collage-note { font-size:15px; } .about-grid { gap:50px; } .contributions .project-topline { flex-direction:column; gap:4px; } }
@media(max-width:800px) { .hero { grid-template-columns:1fr; padding-top:40px; gap:20px; min-height:0; } .hero h1 { font-size:84px; } .hero-copy { max-width:600px; } .hero-name { margin-top:22px; } .hero-description { max-width:490px; } .collage { height:450px; width:min(100%,550px); margin:16px auto 5px; } .hero-shot.room { width:90%; height:260px; left:0; } .hero-shot.pirate { height:190px; } .hero-sticker { right:0; } .hero-tiny-icon { top:270px; } .intro-strip { gap:20px; } .intro-strip p { font-size:11px; } .strip-stat b { font-size:30px; } h2,.section-title h2 { font-size:48px; } .section-title { align-items:flex-start; } .section-title > p { max-width:480px; } .project-info h3 { font-size:23px; } .project-topline { flex-direction:column; gap:5px; } .project-footer { flex-direction:row; flex-wrap:wrap; } .contributions .project-topline { flex-direction:row; } .contributions .project-info h3 { min-height:0; } .about-grid { gap:35px; } .about h2,.experience h2 { font-size:45px; } .contact h2 { font-size:60px; } .email { font-size:24px; } }
@media(max-width:520px) { .nav { height:74px; } .brand { font-size:19px; gap:8px; } .brand-leaf { width:27px; height:32px; } .nav nav { gap:17px; } .nav nav > a:nth-child(2) { display:block; } .nav nav > a[href="#about"],.nav nav > a[href="#work"] { display:none; } .nav .nav-contact { padding:9px 11px; font-size:11px; } .nav nav a { font-size:11px; } .hero { padding-block:30px 33px; } .eyebrow { font-size:9px; } .hero h1 { font-size:clamp(63px,16vw,80px); letter-spacing:-3.8px; } .hero-name { font-size:10px; gap:25px; } .hero-name span { font-size:10px; } .hero-description { font-size:13px; } .button { font-size:12px; padding:12px 15px; gap:15px; } .button-secondary { gap:10px; } .actions { gap:10px; } .hero-foot { font-size:9px; } .collage { height:345px; margin-top:17px; } .hero-shot.room { top:29px; height:188px; padding:5px; } .hero-shot.pirate { bottom:13px; height:147px; width:68%; padding:5px; } .hero-sticker { top:-8px; padding:8px 12px; } .hero-sticker b { font-size:15px; } .hero-sticker span { font-size:8px; } .hero-tiny-icon { top:211px; } .collage-note { font-size:12px; bottom:8px; } .hand-arrow { width:40px; bottom:42px; } .strip-stat b { font-size:27px; } .strip-stat span { font-size:9px; } h2,.section-title h2 { font-size:42px; letter-spacing:-1.8px; } .work { padding-block:51px; } .section-title > p { font-size:12px; } .filter { font-size:10px; padding:8px 10px; } .group-heading h3 { font-size:16px; } .project-card:nth-child(5) .project-art,.project-art { border-radius:5px; } .project-topline { flex-direction:row; gap:8px; flex-wrap:wrap; } .project-info h3 { font-size:25px; } .project-info > p { font-size:13px; } .download-stat { font-size:13px; } .contributions .project-info h3 { font-size:24px; } .contributions .project-info > p { min-height:0; font-size:13px; } .contributions .role-label { font-size:10px; } .contributions .download-stat { font-size:13px; } .data-note { font-size:10px; } .about { padding-block:50px; } .about h2,.experience h2 { font-size:39px; } .about-copy { font-size:13px; } .capabilities { grid-template-columns:1fr; gap:25px; } .capabilities h3 { font-size:19px; } .capabilities p { font-size:13px; } .capability-icon { margin-bottom:12px; } .timeline h3 { font-size:19px; } .timeline p { font-size:12px; } .education-line h3 { font-size:16px; } .education-line p { font-size:12px; } .contact { padding:28px 23px; border-radius:0; } .contact h2 { font-size:49px; letter-spacing:-2px; } .contact > p:not(.eyebrow) { font-size:13px; max-width:280px; } .contact:after { right:-10px; top:105px; width:115px; height:130px; opacity:.13; } .email { font-size:clamp(14px,4.25vw,21px); gap:12px; } .contact-bottom { font-size:11px; } .socials { font-size:11px; gap:18px; } .socials small { font-size:6px; } .dialog-top h2 { font-size:22px; } .dialog-description { font-size:13px; } .dialog-metrics b { font-size:28px; } .dialog-metrics small { font-size:10px; } .dialog-actions { flex-wrap:wrap; } }
@media(prefers-reduced-motion:no-preference) { .hero-copy { animation:portfolio-enter .6s ease-out both; } .collage { animation:portfolio-enter .8s ease-out both; } @keyframes portfolio-enter { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } } }