@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;450;500;550;600;650;700;750;800&display=swap');
:root { color-scheme:dark; --paper:#101318; --ink:#f2f4f8; --muted:#a8b0be; --line:#303641; --orange:#7aa9ff; --sans:'Manrope',Arial,sans-serif; --serif:var(--sans); }
body { background:#101318; color:#f2f4f8; }
::selection { color:#101318; background:#9cbfff; }
.site-header { background:#101318ed; border-color:#2b303a; }
.brand { font-size:23px; font-weight:750; }
.nav nav { gap:29px; font-size:15px; font-weight:550; }
.nav nav a:not(.nav-contact):after { background:#7aa9ff; }
.nav .nav-contact { border-color:#58606f; font-size:14px; }
.eyebrow { color:#aab4c4; font-size:11px; letter-spacing:1.2px; }
.dot { background:#83afff; }
.hero-name,.hero-name span { color:#a2adbd; font-size:12px; }
.hero h1 { font-weight:600; letter-spacing:-4.8px; }
.hero h1 em { color:#f2f4f8; font-weight:600; }
.hero h1 em:after { border-color:#7aa9ff; }
.hero-description { color:#b3bccb; font-size:15px; line-height:1.9; }
.hero-description strong { color:#f2f4f8; font-weight:650; }
.hero-foot { color:#a1acbd; font-size:11px; }
.button { background:#82afff; color:#10203a; border-color:#a5c5ff; font-size:15px; font-weight:750; border-radius:7px; min-height:51px; padding:13px 19px; box-shadow:inset 0 1px #ffffff38; }
.button:hover { background:#aecbff; box-shadow:0 5px 22px #5d97ff20; }
.button-secondary { color:#e1e9f7; background:#191f2a; border-color:#49556a; }
.button-secondary:hover { color:#fff; background:#263247; }
.plain-link { color:#d9e5fa; border-color:#59677e; font-size:14px; }
.plain-link:hover { color:#9ec0ff; }
.collage-cloud { border-color:#414957; background:repeating-linear-gradient(0deg,transparent,transparent 23px,#9dbbff0a 23px,#9dbbff0a 24px),repeating-linear-gradient(90deg,transparent,transparent 23px,#9dbbff0a 23px,#9dbbff0a 24px); }
.hero-shot { background:#222a36; border-color:#465063; box-shadow:0 12px 35px #0005; }
.hero-sticker { background:#171c25; color:#eef4ff; border-color:#9caac0; }
.hero-sticker span { color:#b2bfd2; }
.hero-tiny-icon { border-color:#101318; box-shadow:0 5px 18px #0004; }
.collage-note,.hand-arrow { color:#8db5ff; }
.intro-strip { border-color:#303641; }
.intro-strip p { color:#a5b0c1; font-size:13px; }
.intro-strip strong { color:#e7edf6; }
.strip-stat b { font-size:34px; font-weight:650; }
.strip-stat span { color:#a5b0c1; font-size:12px; }
h2,h2 em { font-weight:600; }
h2 em { color:#82afff; }
.section-title > p { color:#aeb8c7; font-size:15px; line-height:1.85; max-width:365px; }
.work-toolbar > span { color:#a5b0c1; font-size:13px; }
.filter { font-size:14px; padding:11px 17px; font-weight:600; border-radius:6px; min-height:48px; }
.filter small { font-size:12px; }
.filter[aria-pressed=true] { color:#c5d9ff; background:#21324e; border-color:#415f8f; }
.filter:not([aria-pressed=true]):hover { background:#232b38; }
.group-heading { border-color:#3c4554; }
.group-heading h3 { font-size:20px; font-weight:600; }
.group-heading p { color:#a5b0c1; font-size:12px; }
.project-art,.project-card:nth-child(2) .project-art,.project-card:nth-child(4) .project-art { background:#202833; border-color:#364153; }
.project-card:nth-child(2) .project-art { background:#202936; }
.project-card:nth-child(4) .project-art { background:#1d2b38; }
.project-index { color:#b7c5d8; font-size:11px; }
.landscape .art-main,.landscape .art-secondary,.portrait .art-main,.portrait .art-secondary { border-color:#465267; box-shadow:0 12px 25px #0005; }
.art-open { background:#bdcff0; color:#142139; border-color:#e0eaff; }
.project-art:hover .art-open { color:#102448; background:#e2edff; }
.project-topline { align-items:center; flex-wrap:wrap; gap:8px 15px; }
.role-label { color:#b0bdd0; font-size:13px; }
.download-stat { color:#a5c4ff; font-size:20px; font-weight:750; letter-spacing:-.35px; }
.project-info h3 { font-size:28px; font-weight:650; }
.project-info > p { color:#b0bacb; font-size:15px; line-height:1.85; }
.source-link { color:#abb9ce; font-size:12px; text-decoration-color:#657590; }
.detail-button { color:#e4edff; font-size:14px; font-weight:650; min-height:48px; gap:12px; }
.detail-button span { color:#9ebfff; font-size:21px; }
.detail-button:hover { color:#9ebfff; }
.contributions .project-info h3 { font-size:25px; min-height:62px; }
.contributions .project-info > p { font-size:14px; min-height:90px; }
.contributions .download-stat { font-size:19px; }
.contributions .role-label { font-size:12px; }
.contributions .project-topline { flex-direction:column; align-items:flex-start; gap:7px; }
.data-note { color:#a0aec3; font-size:12px; line-height:1.9; }
.about { background:#171c24; border-color:#303a49; }
.about-copy { color:#b0bbcc; font-size:15px; }
.capability-icon { color:#a2c4ff; font-size:15px; }
.capabilities article { border-color:#455064; }
.capabilities h3 { font-size:21px; font-weight:650; }
.capabilities p { font-size:15px; color:#adb9cb; }
.timeline h3 { font-size:23px; font-weight:650; }
.timeline .org { color:#a5c4ff; font-size:14px; }
.timeline p { color:#b0bacb; font-size:14px; }
.timeline time { color:#b0bacb; font-size:12px; }
.education-line h3 { font-size:19px; font-weight:650; }
.education-line p { color:#b0bacb; font-size:14px; }
.contact { background:#181f2a; border-color:#394457; }
.contact h2 { font-weight:600; }
.contact > p:not(.eyebrow) { color:#b9c4d5; font-size:15px; }
.contact:after { filter:brightness(1.7); opacity:.24; }
.email { color:#eef4ff; border-color:#8196b9; font-size:28px; }
.contact-bottom { border-color:#44536b; font-size:14px; }
.socials small { color:#b9c7dd; border-color:#61728e; font-size:8px; }
footer,.footer-handle { color:#a2aec1; font-size:12px; }
dialog { background:#181e28; border-color:#46546a; color:#eff4ff; }
dialog::backdrop { background:#05080ec9; }
.dialog-close { background:#2d3a4d; color:#edf4ff; }
.dialog-top h2 { font-size:30px; }
.dialog-top p { color:#b6c3d8; font-size:14px; }
.dialog-description { color:#c4cee0; font-size:15px; }
.dialog-metrics b { color:#a6c5ff; font-size:38px; font-weight:650; }
.dialog-metrics small { color:#b0bfd5; font-size:13px; }
.dialog-caption { color:#a2b3cd; font-size:12px; }
.dialog-actions > a:last-child { font-size:14px; }
.playground-description { color:#b2bfd3; font-size:15px; }
.puzzle-sketch,.game-rules b { color:#9dbfff; }
.game-rules li { color:#b3c0d3; font-size:14px; }
.game-rules b { font-size:12px; }
.playground-note { color:#a6b5cd; font-size:12px; }
kbd { color:#ccdaf1; background:#263248; border-color:#445573; }
/* Small, intentional responses; the existing project imagery remains the focus. */
.download-stat { display:inline-flex; align-items:center; gap:8px; }
.download-stat:before { content:'↓'; font-size:.8em; font-weight:500; color:#8baee8; }
.project-art { transition:transform .35s,box-shadow .35s,border-color .35s; }
.project-art:hover { border-color:#7397cd; box-shadow:0 14px 32px #0004; }
.filter,.detail-button,.nav-contact { transition:color .2s,background .2s,border-color .2s; }
.brand-leaf { filter:none; }
@media(max-width:1100px) { .nav nav { font-size:14px; gap:24px; } .contributions .project-topline { flex-direction:column; } .timeline article { grid-template-columns:135px 1fr; gap:20px; } }
@media(max-width:800px) { .nav nav { font-size:13px; gap:20px; } .project-info h3 { font-size:26px; } .download-stat { font-size:20px; } .group-heading { gap:10px; } .group-heading h3 { font-size:19px; } .contributions .project-info h3 { min-height:0; } .contributions .project-info > p { min-height:90px; } .contributions .download-stat { font-size:19px; } }
@media(max-width:520px) { .brand { font-size:19px; } .nav nav a,.nav .nav-contact { font-size:12px; } .nav nav { gap:13px; } .hero h1 { letter-spacing:-3.8px; } .hero-description { font-size:14px; } .hero-name,.hero-name span { font-size:11px; } .button { font-size:14px; min-height:49px; padding:12px 15px; } .plain-link { font-size:13px; } .hero-foot { font-size:10px; } .eyebrow { font-size:10px; } .intro-strip p { font-size:12px; } .strip-stat b { font-size:29px; } .strip-stat span { font-size:11px; } .section-title > p { font-size:14px; } .work-toolbar > span { font-size:12px; } .filter { font-size:12px; padding:10px 11px; min-height:46px; } .filter small { font-size:10px; } .group-heading h3 { font-size:19px; } .group-heading p { font-size:12px; } .project-index { font-size:10px; } .project-info h3 { font-size:26px; } .project-info > p,.contributions .project-info > p { font-size:14px; min-height:0; } .download-stat,.contributions .download-stat { font-size:20px; } .project-topline,.contributions .project-topline { flex-direction:column; align-items:flex-start; } .role-label,.contributions .role-label { font-size:12px; } .source-link { font-size:11px; } .detail-button { font-size:13px; } .contributions .project-info h3 { font-size:25px; } .data-note { font-size:11px; } .capabilities h3 { font-size:21px; } .capabilities p { font-size:14px; } .timeline article { grid-template-columns:1fr; gap:10px; } .timeline h3 { font-size:22px; } .timeline p { font-size:14px; } .education-line h3 { font-size:18px; } .education-line p { font-size:14px; } .contact h2 { font-size:49px; } .contact > p:not(.eyebrow) { font-size:14px; } .email { font-size:clamp(14px,4.1vw,21px); } .contact-bottom { font-size:13px; } .socials { font-size:13px; } footer,.footer-handle { font-size:11px; } .dialog-top h2 { font-size:24px; } .dialog-top p { font-size:12px; } .dialog-description { font-size:14px; } .dialog-metrics b { font-size:34px; } .dialog-metrics small { font-size:12px; } .dialog-caption { font-size:11px; } .dialog-actions .button { font-size:13px; } .playground-description { font-size:14px; } .game-rules li { font-size:13px; } .playground-note { font-size:11px; } }