/* Minimal editorial portfolio · software systems in 3D */
:root { --font-display: 'Space Grotesk', sans-serif; --font-body: 'Manrope', sans-serif; --font-mono: 'DM Mono', monospace; --max: 1160px; --gutter: clamp(1.25rem, 5vw, 5rem); --nav-h: 74px; --ease: cubic-bezier(.22, 1, .36, 1); --radius: 14px; --radius-sm: 8px; }
[data-theme="light"] { --bg:#f7f6f1; --surface:#fff; --surface-soft:#f0f0ea; --ink:#171915; --muted:#61665e; --faint:#92978d; --line:rgba(23,25,21,.14); --line-soft:rgba(23,25,21,.075); --accent:#a8ec36; --accent-ink:#183000; --violet:#6352b8; --warm:#b5571b; --shadow:0 18px 46px rgba(35,37,30,.08); }
[data-theme="dark"] { --bg:#11120f; --surface:#191b16; --surface-soft:#141611; --ink:#f5f3eb; --muted:#b4b7ab; --faint:#7e8279; --line:rgba(245,243,235,.14); --line-soft:rgba(245,243,235,.07); --accent:#baff4a; --accent-ink:#1d3500; --violet:#b3a5ff; --warm:#ffc077; --shadow:0 18px 46px rgba(0,0,0,.2); }
* { box-sizing:border-box; margin:0; } html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px + env(safe-area-inset-top)); -webkit-font-smoothing:antialiased; } body { min-width:320px; background:var(--bg); color:var(--ink); font:400 16px/1.7 var(--font-body); letter-spacing:-.01em; overflow-x:hidden; overscroll-behavior-x:none; transition:background .2s,color .2s; } body,input,textarea { overflow-wrap:anywhere; } a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; } button,input,textarea { color:inherit; font:inherit; } button { border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; } ::selection { background:var(--accent); color:var(--accent-ink); } ::-webkit-scrollbar { width:9px; } ::-webkit-scrollbar-track { background:var(--bg); } ::-webkit-scrollbar-thumb { border:2px solid var(--bg); border-radius:10px; background:var(--faint); } em { color:var(--violet); font-style:normal; }
.page-grain { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.025; background-image:linear-gradient(90deg,transparent 49.5%,var(--ink) 50%,transparent 50.5%); background-size:32px 32px; } main,.footer { position:relative; z-index:1; } .scroll-progress { position:fixed; top:0; left:0; z-index:2000; width:100%; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; will-change:transform; }
/* A quiet visual spine makes the page feel like one continuous system. */ .flow-rail { position:fixed; top:50%; right:clamp(.8rem,2.2vw,2.2rem); z-index:800; display:flex; flex-direction:column; justify-content:space-between; width:12px; height:228px; transform:translateY(-50%); pointer-events:none; } .flow-rail__track { position:absolute; top:4px; bottom:4px; left:50%; width:1px; background:var(--line); transform:translateX(-50%); } .flow-rail__track span { display:block; width:1px; height:0; background:var(--violet); transition:height .6s var(--ease); } .flow-rail__node { position:relative; z-index:1; display:block; width:7px; height:7px; margin-left:2px; border:1px solid var(--faint); border-radius:50%; background:var(--bg); box-shadow:0 0 0 3px var(--bg); transform:rotate(45deg); transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s; } .flow-rail__node.active { border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 3px var(--bg),0 0 16px color-mix(in srgb,var(--accent) 55%,transparent); transform:rotate(45deg) scale(1.45); }
/* Navigation */
.nav { position:fixed; inset:0 0 auto; z-index:1000; height:var(--nav-h); border-bottom:1px solid transparent; background:var(--bg); transition:transform .32s var(--ease),border-color .2s; } .nav--scrolled { border-color:var(--line-soft); } .nav--hidden { transform:translateY(-100%); } .nav__inner { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:var(--max); height:100%; padding:0 var(--gutter); margin:auto; } .nav__logo,.footer__logo { font:700 1.05rem var(--font-display); letter-spacing:.13em; } .nav__logo span,.footer__logo span { color:var(--accent); } .nav__links { display:flex; gap:clamp(.75rem,2vw,1.5rem); } .nav__link { position:relative; padding:.5rem 0; color:var(--muted); font-size:.69rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:color .2s; } .nav__link::after { position:absolute; right:0; bottom:0; left:0; height:2px; background:var(--accent); content:''; transform:scaleX(0); transform-origin:right; transition:transform .22s var(--ease); } .nav__link:hover,.nav__link.active { color:var(--ink); } .nav__link:hover::after,.nav__link.active::after { transform:scaleX(1); transform-origin:left; } .nav__actions { display:flex; gap:.65rem; align-items:center; } .theme-toggle { display:grid; width:44px; height:44px; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; transition:border-color .2s,transform .25s var(--ease); } .theme-toggle:hover { border-color:var(--violet); transform:rotate(16deg); } .theme-toggle svg { position:absolute; width:16px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; } [data-theme="dark"] .icon-sun,[data-theme="light"] .icon-moon { display:none; } .nav__burger { display:none; width:44px; height:44px; padding:6px 8px; background:transparent; } .nav__burger span { display:block; height:2px; margin:5px 0; border-radius:2px; background:var(--ink); transition:transform .25s var(--ease); } .nav__burger.active span:first-child { transform:translateY(3.5px) rotate(45deg); } .nav__burger.active span:last-child { transform:translateY(-3.5px) rotate(-45deg); } .mobile-menu { position:fixed; inset:0; z-index:999; display:flex; flex-direction:column; gap:1.05rem; align-items:center; justify-content:center; background:var(--bg); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s,visibility 0s linear .2s; } .mobile-menu.active { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .2s; } .mobile-menu__link { font:500 clamp(2rem,10vw,3.4rem) var(--font-display); letter-spacing:-.05em; } .mobile-menu__link:hover { color:var(--violet); }

/* Shared */
.hero,.section { position:relative; width:100%; max-width:var(--max); min-width:0; padding-right:var(--gutter); padding-left:var(--gutter); margin:auto; } .section { scroll-margin-top:calc(var(--nav-h) + 12px); padding-top:clamp(5rem,9vw,7.5rem); padding-bottom:clamp(4.5rem,7vw,6rem); } .section + .section { padding-top:clamp(2.25rem,3.5vw,3.5rem); } .section > *:not(.section__scene),.hero__inner { min-width:0; } .section__heading { position:relative; z-index:2; margin-bottom:clamp(2.3rem,5vw,3.8rem); } .section__index,.eyebrow,.fact-label,.toolkit__label,.project__meta,.education-item__date,.experience-item__date { font:500 .67rem/1.45 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; } .section__index { display:flex; gap:.6rem; align-items:center; margin-bottom:1.05rem; color:var(--violet); } .section__index::before { width:21px; height:1px; background:currentColor; content:''; } .section__heading h2 { max-width:15ch; font:500 clamp(2.35rem,5.6vw,4.8rem)/1.02 var(--font-display); letter-spacing:-.075em; } .reveal { opacity:1; transform:none; } .text-link,.project__link { display:inline-flex; gap:.55rem; align-items:center; color:var(--violet); font-size:.82rem; font-weight:800; } .text-link span,.project__link span,.contact__direct span { transition:transform .2s var(--ease); } .arrow { display:none; } .text-link:hover span,.project__link:hover span,.contact__direct a:hover span { transform:translate(3px,-3px); }
/* Lightweight CSS 3D companions keep every chapter in the same visual language as the hero. */ .section__scene { position:absolute; z-index:0; top:clamp(3.8rem,8vw,7rem); right:clamp(1rem,4vw,4rem); width:clamp(120px,16vw,205px); height:clamp(120px,16vw,205px); perspective:850px; opacity:.34; pointer-events:none; transform:translate3d(calc(var(--pointer-x,0) * -7px),calc(var(--pointer-y,0) * -7px),0); transition:opacity .7s var(--ease),transform .8s var(--ease); } .section[data-flow-active="true"] .section__scene { opacity:.82; } .scene-orbit { position:absolute; inset:15%; border:1px solid color-mix(in srgb,var(--violet) 65%,transparent); border-radius:50%; transform:rotateX(64deg) rotateZ(-20deg); animation:scene-orbit 12s linear infinite; } .scene-orbit::after { position:absolute; top:-4px; left:50%; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent); content:''; } .scene-core { position:absolute; top:39%; left:39%; width:22%; height:22%; border-radius:35%; background:var(--accent); box-shadow:0 0 28px color-mix(in srgb,var(--accent) 40%,transparent); transform:translateZ(28px) rotate(45deg); animation:scene-float 5s ease-in-out infinite; } .scene-cube { position:absolute; top:30%; left:30%; width:40%; height:40%; border:1px solid var(--violet); background:color-mix(in srgb,var(--surface) 60%,transparent); box-shadow:inset 0 0 0 8px color-mix(in srgb,var(--violet) 8%,transparent); transform:rotateX(55deg) rotateY(-35deg) rotateZ(28deg) translateZ(8px); transform-style:preserve-3d; animation:scene-cube 8s ease-in-out infinite; } .scene-cube::before,.scene-cube::after { position:absolute; inset:8px; border:1px solid color-mix(in srgb,var(--accent) 70%,transparent); content:''; } .scene-cube::before { transform:translateZ(18px); } .scene-cube::after { transform:rotateY(90deg) translateZ(18px); transform-origin:center; } .scene-beam { position:absolute; top:49%; right:-8%; left:-8%; height:1px; background:linear-gradient(90deg,transparent,var(--line),var(--accent),var(--line),transparent); transform:rotate(-18deg) translateZ(-4px); } .section__scene--research .scene-core,.section__scene--skills .scene-core { background:var(--violet); } .section__scene--projects .scene-core,.section__scene--contact .scene-core { border-radius:50%; } .section__scene--experience .scene-cube,.section__scene--education .scene-cube { transform:rotateX(35deg) rotateY(-55deg) rotateZ(20deg) translateZ(8px); } .section__scene .scene-orbit,.section__scene .scene-core,.section__scene .scene-cube { animation-play-state:paused; } .section[data-flow-active="true"] .scene-orbit,.section[data-flow-active="true"] .scene-core,.section[data-flow-active="true"] .scene-cube { animation-play-state:running; } @keyframes scene-orbit { to { transform:rotateX(64deg) rotateZ(340deg); } } @keyframes scene-float { 50% { transform:translate3d(5px,-8px,34px) rotate(135deg); } } @keyframes scene-cube { 50% { transform:rotateX(70deg) rotateY(15deg) rotateZ(48deg) translateZ(22px); } }

/* Hero: 3D architecture, not a cosmic scene */
.hero { position:relative; display:flex; align-items:center; min-height:100svh; padding-top:calc(var(--nav-h) + 3rem); padding-bottom:5rem; overflow:clip; } .hero__inner { position:relative; z-index:2; width:min(620px,100%); } .eyebrow { display:inline-flex; gap:.6rem; align-items:center; margin-bottom:1.2rem; padding:.42rem .68rem; border:1px solid var(--line); border-radius:4px; color:var(--muted); } .status-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); } .hero__kicker { margin-bottom:1.05rem; color:var(--violet); font:500 .76rem var(--font-mono); letter-spacing:.02em; } .hero__kicker span { color:var(--faint); padding:0 .18rem; } .hero__title { font:600 clamp(3.45rem,6.5vw,5.8rem)/.92 var(--font-display); letter-spacing:-.085em; } .hero__title span { color:var(--violet); } .hero__surname { margin-top:.05em; color:var(--faint); font:400 clamp(1.4rem,2.8vw,2.5rem)/1 var(--font-display); letter-spacing:-.055em; } .hero__role { min-height:1.7rem; margin:1.8rem 0 1.1rem; color:var(--ink); font:500 clamp(.9rem,1.8vw,1.08rem) var(--font-mono); } .hero__caret { color:var(--accent); } .hero__intro { max-width:560px; margin-bottom:1.9rem; color:var(--muted); font-size:clamp(.96rem,1.4vw,1.06rem); } .hero__actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:clamp(3rem,6vw,4.8rem); } .button { display:inline-flex; gap:.7rem; align-items:center; justify-content:center; min-height:47px; padding:.68rem 1.2rem; border-radius:5px; font-size:.81rem; font-weight:800; transition:transform .22s var(--ease),border-color .2s,box-shadow .22s; } .button:hover { transform:translateY(-2px); } .button--primary { background:var(--accent); color:var(--accent-ink); box-shadow:0 7px 0 color-mix(in srgb,var(--accent) 45%,transparent); } .button--primary:hover { box-shadow:0 10px 0 color-mix(in srgb,var(--accent) 45%,transparent); } .button--outline { border:1px solid var(--line); color:var(--ink); } .button--outline:hover { border-color:var(--violet); } .hero__facts { display:flex; flex-wrap:wrap; gap:clamp(1.15rem,4vw,3rem); padding-top:1.25rem; border-top:1px solid var(--line); } .hero__facts > div { display:flex; flex-direction:column; gap:.25rem; } .fact-label { color:var(--faint); } .hero__facts strong { font-size:.87rem; font-weight:700; } .hero__scroll { position:absolute; right:var(--gutter); bottom:2.15rem; display:flex; gap:.65rem; align-items:center; color:var(--faint); font:.62rem var(--font-mono); letter-spacing:.1em; writing-mode:vertical-rl; text-transform:uppercase; } .hero__scroll-line { width:1px; height:46px; background:var(--line); } .hero__visual { position:absolute; z-index:1; top:50%; right:clamp(-4rem,-3vw,-1rem); width:min(45vw,570px); height:min(45vw,570px); transform:translateY(-50%); pointer-events:none; visibility:hidden; contain:layout paint; } .hero__visual.is-ready { visibility:visible; } .hero__visual::before { position:absolute; inset:10%; border:1px solid var(--line); content:''; transform:rotate(45deg); transition:transform .8s var(--ease); } .hero__visual.is-exploded::before { transform:rotate(61deg) scale(1.08); } .hero__visual-glow { position:absolute; inset:16%; background:var(--surface-soft); } .hero__three { position:absolute; inset:0; } .hero__three canvas { display:block; width:100%; height:100%; } .hero__model-labels { position:absolute; inset:14% 7%; color:var(--faint); font:.53rem var(--font-mono); letter-spacing:.06em; text-transform:uppercase; } .hero__model-label { position:absolute; padding:.3rem .38rem; border:1px solid var(--line); background:color-mix(in srgb,var(--bg) 82%,transparent); transition:transform .7s var(--ease),color .4s,border-color .4s; } .hero__model-label::before { display:inline-block; width:13px; height:1px; margin:0 .35rem .18rem 0; background:var(--accent); content:''; } .hero__model-label--input { top:25%; left:0; } .hero__model-label--features { top:39%; left:25%; } .hero__model-label--model { right:22%; bottom:37%; } .hero__model-label--output { right:0; bottom:21%; } .hero__visual.is-exploded .hero__model-label { color:var(--ink); border-color:var(--violet); } .hero__visual.is-exploded .hero__model-label--input { transform:translate(-8px,-10px); } .hero__visual.is-exploded .hero__model-label--features { transform:translate(-4px,-16px); } .hero__visual.is-exploded .hero__model-label--model { transform:translate(5px,13px); } .hero__visual.is-exploded .hero__model-label--output { transform:translate(9px,18px); } .hero__visual-caption { position:absolute; right:5%; bottom:8%; padding:.42rem .5rem; border:1px solid var(--line); background:var(--bg); color:var(--faint); font:.54rem/1.6 var(--font-mono); letter-spacing:.1em; } .hero__model-control { position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:center; margin-top:-2.8rem; margin-bottom:2.2rem; } .model-toggle { display:inline-flex; min-height:44px; gap:.7rem; align-items:center; padding:.65rem .9rem; border:1px solid var(--violet); border-radius:5px; background:var(--surface); color:var(--ink); font:.72rem var(--font-mono); letter-spacing:.03em; transition:background .25s,color .25s,transform .25s var(--ease),box-shadow .25s; } .model-toggle:hover,.model-toggle:focus-visible { background:var(--violet); color:var(--surface); transform:translateY(-2px); box-shadow:0 7px 0 color-mix(in srgb,var(--violet) 35%,transparent); } .model-toggle span:last-child { color:var(--accent); font-size:1rem; } .hero__model-control p { color:var(--faint); font:.6rem var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }

/* About */
.about__grid { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2.5rem,8vw,7rem); align-items:start; } .about__statement { max-width:670px; color:var(--muted); } .about__statement .lead { margin-bottom:1.3rem; color:var(--ink); font:500 clamp(1.45rem,2.8vw,2.1rem)/1.28 var(--font-display); letter-spacing:-.045em; } .about__statement p + p { margin-top:1rem; } .inline-links { display:flex; gap:1.3rem; flex-wrap:wrap; margin-top:1.6rem; } .profile__card { padding:1.45rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); } .card-star { margin-bottom:1.05rem; color:var(--accent); font-size:1.5rem; } .card-label { margin-bottom:.85rem; color:var(--violet); font:.65rem var(--font-mono); letter-spacing:.1em; text-transform:uppercase; } dl { display:grid; gap:.65rem; } dl > div { padding-top:.65rem; border-top:1px solid var(--line-soft); } dt { color:var(--faint); font:.62rem var(--font-mono); letter-spacing:.06em; text-transform:uppercase; } dd { font-size:.82rem; font-weight:700; } dd a:hover { color:var(--violet); } .metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:clamp(3rem,6vw,4.3rem); border:1px solid var(--line); border-radius:var(--radius); background:var(--line); overflow:hidden; } .metric { padding:clamp(1.25rem,3vw,1.7rem); background:var(--surface-soft); } .metric strong { display:block; margin-bottom:.2rem; color:var(--violet); font:600 clamp(1.7rem,3vw,2.45rem) var(--font-display); letter-spacing:-.065em; } .metric span { color:var(--muted); font:.61rem var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }

/* Research */
.research__intro { display:flex; justify-content:space-between; gap:2rem; align-items:flex-end; margin-bottom:2.1rem; } .research__intro p { max-width:650px; color:var(--muted); } .research__target { max-width:225px; padding-left:.9rem; border-left:2px solid var(--accent); color:var(--warm); font:.64rem/1.55 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; } .interest-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid var(--line); border-radius:var(--radius); background:var(--line); overflow:hidden; } .interest-card { min-height:225px; padding:1.4rem; background:var(--surface-soft); transition:background .2s,transform .2s var(--ease); } .interest-card:hover { position:relative; z-index:1; background:var(--surface); transform:translateY(-4px); } .interest-number,.research-project__number { color:var(--violet); font:.69rem var(--font-mono); } .interest-card h3 { margin:2.9rem 0 .8rem; font:500 1.08rem/1.23 var(--font-display); letter-spacing:-.035em; } .interest-card p { color:var(--muted); font-size:.81rem; line-height:1.64; } .research__projects { margin-top:3.35rem; } .subsection-heading { display:flex; justify-content:space-between; gap:2rem; align-items:baseline; margin-bottom:1rem; } .subsection-heading p { max-width:460px; color:var(--muted); font-size:.83rem; } .research-project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; border:1px solid var(--line); border-radius:var(--radius); background:var(--line); overflow:hidden; } .research-project { display:grid; grid-template-columns:40px 1fr; gap:.85rem; padding:1.45rem; background:var(--surface); } .research-project h3 { margin-bottom:.6rem; font:500 1.25rem/1.2 var(--font-display); letter-spacing:-.04em; } .research-project p { margin-bottom:.85rem; color:var(--muted); font-size:.81rem; }

/* Projects, experience and education */
.project-list,.experience-list,.education-list { border-top:1px solid var(--line); } .project { display:grid; grid-template-columns:68px 1fr; gap:1.15rem; padding:clamp(1.9rem,4vw,3rem) 0; border-bottom:1px solid var(--line); } .project__number { color:var(--violet); font:.73rem var(--font-mono); } .project__body { max-width:850px; } .project__meta { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:.7rem; color:var(--faint); } .project__status { padding:.15rem .42rem; border:1px solid var(--line); border-radius:3px; color:var(--violet); } .project h3 { margin-bottom:.75rem; font:500 clamp(1.75rem,3.7vw,2.7rem)/1.1 var(--font-display); letter-spacing:-.06em; } .project p { max-width:750px; color:var(--muted); font-size:.91rem; } .project__detail { margin-top:.75rem; font-size:.83rem !important; } .project__tags,.tag-list { display:flex; gap:.43rem; flex-wrap:wrap; } .project__tags { margin:1.1rem 0 .8rem; } .project__tags span,.tag-list span { padding:.32rem .58rem; border:1px solid var(--line); border-radius:4px; color:var(--muted); font-size:.73rem; transition:border-color .2s,color .2s; } .project__tags span:hover,.tag-list span:hover { border-color:var(--violet); color:var(--violet); } .project__note { color:var(--faint); font:.64rem var(--font-mono); } .academic-strip,.achievement { display:flex; gap:1rem; align-items:flex-start; margin-top:1.85rem; padding:1.25rem 1.35rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); } .academic-strip__mark,.achievement__mark { color:var(--accent); font-size:1.45rem; line-height:1; } .academic-strip p,.achievement p { color:var(--muted); font-size:.83rem; } .academic-strip strong,.achievement p strong { color:var(--ink); } .achievement p span { color:var(--violet); padding:0 .3rem; } .experience-item,.education-item { display:grid; grid-template-columns:220px 1fr; gap:2rem; padding:clamp(1.65rem,3.4vw,2.4rem) 0; border-bottom:1px solid var(--line); } .experience-item__date,.education-item__date { color:var(--violet); } .experience-item__date span { display:block; margin-top:.4rem; color:var(--faint); font-size:.58rem; letter-spacing:.03em; } .experience-item h3,.education-item h3 { margin-bottom:.3rem; font:500 1.36rem/1.2 var(--font-display); letter-spacing:-.045em; } .experience-item__org { margin-bottom:.5rem; color:var(--violet); font-size:.82rem; } .experience-item p:not(.experience-item__org),.education-item p { max-width:700px; color:var(--muted); font-size:.85rem; } .experience-item__badge { display:inline-block; margin-top:.85rem; padding:.29rem .52rem; border:1px solid var(--line); border-radius:3px; color:var(--faint); font:.61rem var(--font-mono); } .education-item strong { display:block; margin-top:.5rem; color:var(--warm); font:.68rem var(--font-mono); } .education-item small { display:block; max-width:700px; margin-top:.6rem; color:var(--faint); font-size:.75rem; } .education-item--current { background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 65%); }

/* Skills, contact, footer */
.skills__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; border:1px solid var(--line); border-radius:var(--radius); background:var(--line); overflow:hidden; } .skill-group { min-height:155px; padding:1.45rem; background:var(--surface); } .skill-group--wide { grid-column:1 / -1; min-height:auto; } .toolkit__label { display:block; margin-bottom:1rem; color:var(--violet); } .contact { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,7vw,6rem); border-top:1px solid var(--line); } .contact__heading h2 { margin:1rem 0 1.1rem; font:500 clamp(2.45rem,5.6vw,4.5rem)/1 var(--font-display); letter-spacing:-.075em; } .contact__heading p { max-width:390px; color:var(--muted); font-size:.89rem; } .contact__direct { display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; margin-top:1.6rem; } .contact__direct a { display:inline-flex; gap:.5rem; color:var(--violet); font-size:.83rem; font-weight:800; } .contact__form { display:flex; flex-direction:column; gap:1rem; padding:1.4rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .contact__form label { display:flex; flex-direction:column; gap:.35rem; } .contact__form label > span { color:var(--faint); font:.63rem var(--font-mono); letter-spacing:.09em; text-transform:uppercase; } .contact__form input,.contact__form textarea { width:100%; padding:.78rem .85rem; border:1px solid var(--line); border-radius:var(--radius-sm); outline:none; background:var(--surface-soft); color:var(--ink); font-size:.85rem; resize:vertical; transition:border-color .2s,box-shadow .2s; } .contact__form input:focus,.contact__form textarea:focus { border-color:var(--violet); box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 14%,transparent); } .contact__form input::placeholder,.contact__form textarea::placeholder { color:var(--faint); } .form-submit { align-self:flex-start; } .form-status { min-height:1.5em; color:var(--violet); font:.7rem var(--font-mono); } .form-status.error { color:var(--warm); } .footer { border-top:1px solid var(--line); } .footer__inner { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; width:100%; max-width:var(--max); padding:1.9rem var(--gutter); margin:auto; } .footer__copy { color:var(--faint); font-size:.7rem; } .footer__links { display:flex; gap:1rem; } .footer__links a { color:var(--muted); font:.69rem var(--font-mono); } .footer__links a:hover { color:var(--violet); } .back-to-top { position:fixed; right:calc(1.25rem + env(safe-area-inset-right)); bottom:calc(1.25rem + env(safe-area-inset-bottom)); z-index:900; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s,transform .2s,border-color .2s; } .back-to-top.visible { opacity:1; pointer-events:auto; transform:none; } .back-to-top:hover { border-color:var(--violet); }

@media (max-width:1020px) { .nav__links { gap:.7rem; } .nav__link { font-size:.61rem; } .section__scene { right:var(--gutter); } }
@media (max-width:860px) { .nav { height:calc(var(--nav-h) + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); } .nav__inner { height:var(--nav-h); } .mobile-menu { padding:env(safe-area-inset-top) max(1rem,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(1rem,env(safe-area-inset-left)); } .nav__links { display:none; } .nav__burger { display:block; } .nav--hidden { transform:none; } .flow-rail { display:none; } .about__grid,.contact { grid-template-columns:1fr; } .profile__card { max-width:540px; } .research__intro,.subsection-heading { display:block; } .research__target { display:inline-block; margin-top:1rem; } .interest-grid { grid-template-columns:repeat(2,1fr); } .skills__grid { grid-template-columns:1fr; } .skill-group--wide { grid-column:auto; } .experience-item,.education-item { grid-template-columns:1fr; gap:.6rem; } .hero { padding-top:calc(var(--nav-h) + 3rem + env(safe-area-inset-top)); } .hero__visual { right:-13%; width:min(61vw,500px); height:min(61vw,500px); opacity:.62; } .hero__facts { position:relative; z-index:3; background:var(--bg); } .hero__model-control { margin-top:-1.5rem; } .hero__scroll { display:none; } .section__scene { top:4.5rem; right:1.5rem; opacity:.2; } }
@media (max-width:680px) { .form-row { grid-template-columns:1fr; } .contact__form input,.contact__form textarea { font-size:16px; } .hero__model-control { display:block; max-width:280px; margin-top:-.8rem; } .hero__model-control p { margin-top:.55rem; line-height:1.5; } }
@media (max-width:560px) { body { font-size:15px; } .page-grain { display:none; } .hero { min-height:750px; padding-top:7.15rem; } .hero__title { max-width:9ch; font-size:clamp(3rem,15vw,4.7rem); overflow-wrap:normal; } .hero__visual { right:-32%; bottom:-4%; top:auto; width:82vw; height:82vw; opacity:.3; transform:none; } .hero__visual.is-exploded { opacity:.42; } .hero__model-labels { inset:10% 3%; font-size:.46rem; } .hero__model-label { padding:.22rem .25rem; } .hero__model-label--input { top:18%; } .hero__model-label--features { top:35%; } .hero__model-label--model { right:15%; bottom:36%; } .hero__model-label--output { right:-2%; bottom:16%; } .hero__visual-caption { right:2%; bottom:3%; font-size:.48rem; } .hero__facts { display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; } .metrics,.interest-grid,.research-project-grid,.form-row { grid-template-columns:1fr; } .metric { display:flex; align-items:baseline; justify-content:space-between; } .metric strong { margin:0; } .project { grid-template-columns:1fr; gap:.45rem; } .contact__form { padding:1.1rem; } .footer__inner { flex-direction:column; align-items:flex-start; } .section__scene { top:3rem; right:1rem; width:108px; height:108px; opacity:.16; } .section__heading h2 { font-size:clamp(2.2rem,11vw,3.8rem); } }
@media (max-width:860px) { .hero { display:flex; flex-direction:column; align-items:stretch; min-height:auto; padding-bottom:4rem; } .hero__inner { order:1; width:100%; } .hero__visual { position:relative; order:2; top:auto; right:auto; bottom:auto; left:auto; width:min(100%,520px); height:300px; margin:1.5rem auto 0; opacity:.45; transform:none; } .hero__visual::before { inset:6%; } .hero__visual-glow { inset:12%; } .hero__model-labels { inset:8% 2%; font-size:.5rem; } .hero__model-label--input { top:15%; left:0; } .hero__model-label--features { top:33%; left:24%; } .hero__model-label--model { right:19%; bottom:34%; } .hero__model-label--output { right:0; bottom:14%; } .hero__visual-caption { right:1%; bottom:1%; font-size:.5rem; } }
@media (max-width:600px) { .hero { padding-bottom:3.25rem; } .hero__visual { width:min(100%,340px); height:220px; margin-top:1.4rem; opacity:.42; } .hero__model-labels { inset:8% 0; font-size:.48rem; } .hero__model-label { padding:.24rem .3rem; } .hero__model-label--input { top:15%; left:0; } .hero__model-label--features { top:33%; left:22%; } .hero__model-label--model { right:18%; bottom:34%; } .hero__model-label--output { right:0; bottom:14%; } .hero__visual-caption { right:1%; bottom:1%; font-size:.48rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } .hero__visual { display:none; } .section__scene { display:none; } }