:root { --ink:#202328; --muted:#73777b; --line:#dfe1dd; --paper:#f5f5f0; --lime:#d7f36b; --purple:#aca5e8; --green:#b8d8ba; --orange:#f4b078; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:Manrope, sans-serif; line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.section-wrap { width:min(1160px, calc(100% - 80px)); margin-inline:auto; }
.site-header { align-items:center; display:flex; justify-content:space-between; margin:0 auto; padding:28px 0; width:min(1280px, calc(100% - 80px)); }
.brand { font-size:1.8rem; font-weight:800; letter-spacing:-.12em; }.brand span { color:#8898db; }
.site-nav { align-items:center; display:flex; gap:34px; font-size:.77rem; font-weight:700; }.site-nav a { color:#777b7a; transition:color .2s; }.site-nav a:hover,.site-nav a.active { color:var(--ink); }.site-nav .nav-contact { background:var(--ink); border-radius:30px; color:#fff; padding:12px 19px; }.nav-contact span { color:var(--lime); margin-left:8px; }
.menu-toggle { display:none; }
.hero { align-items:center; display:grid; gap:60px; grid-template-columns:1fr .9fr; min-height:670px; padding:65px 0 90px; }.eyebrow,.section-label { align-items:center; color:#7e837f; display:flex; font-family:"DM Mono", monospace; font-size:.68rem; gap:10px; letter-spacing:.06em; text-transform:uppercase; }.eyebrow i { background:#91be7a; border-radius:100%; display:block; height:8px; width:8px; }
h1 { font-size:clamp(3.4rem, 7vw, 6.3rem); font-weight:700; letter-spacing:-.095em; line-height:.98; margin:25px 0 28px; max-width:680px; } em { color:#8b91d2; font-family:Georgia, serif; font-weight:400; letter-spacing:-.08em; }
.hero-intro { color:var(--muted); font-size:1rem; line-height:1.9; max-width:485px; }.hero-intro strong { color:var(--ink); font-weight:700; }.hero-actions { align-items:center; display:flex; gap:30px; margin-top:35px; }.button { border-radius:30px; display:inline-flex; font-size:.76rem; font-weight:800; gap:24px; padding:15px 21px; }.button-primary { background:var(--ink); color:white; }.button-primary span { color:var(--lime); font-size:1.2rem; line-height:1; }.text-link { border-bottom:1px solid #afb2ae; font-size:.78rem; font-weight:700; padding-bottom:5px; }.text-link span { color:#8b91d2; font-size:1rem; margin-left:8px; }
.hero-art { height:450px; position:relative; }.portrait-card { align-items:center; background:var(--ink); border-radius:48% 48% 12px 12px; bottom:15px; display:flex; height:390px; justify-content:center; left:50%; overflow:hidden; position:absolute; transform:translateX(-50%); width:295px; }.portrait-card:after { background:var(--lime); border-radius:50%; content:""; height:235px; position:absolute; top:-45px; width:235px; }.portrait-initials { color:#f8f8f2; font-size:5rem; font-weight:800; letter-spacing:-.13em; position:relative; z-index:1; }.portrait-caption { bottom:20px; color:#adb1a6; display:flex; font-family:"DM Mono",monospace; font-size:.58rem; justify-content:space-between; left:25px; position:absolute; right:25px; z-index:2; }.portrait-caption span:first-child { color:var(--lime); }.orbit { border:1px solid #d5d7d0; border-radius:50%; position:absolute; }.orbit-one { height:440px; left:50%; top:0; transform:translateX(-50%) rotate(20deg); width:325px; }.orbit-two { border-color:#cad9a7; height:370px; left:52%; top:35px; transform:translateX(-50%) rotate(-35deg); width:390px; }.floating-note { background:#fff; box-shadow:0 8px 25px #343a3912; font-family:"DM Mono",monospace; font-size:.6rem; line-height:1.7; padding:13px 15px; position:absolute; z-index:3; }.floating-note b { color:#8b91d2; font-weight:500; }.note-top { right:0; top:40px; transform:rotate(5deg); }.note-bottom { bottom:40px; left:0; transform:rotate(-6deg); }
.marquee { background:var(--lime); color:var(--ink); font-family:"DM Mono",monospace; font-size:.71rem; letter-spacing:.2em; overflow:hidden; padding:14px 0; white-space:nowrap; }.marquee div { animation:marquee 24s linear infinite; width:max-content; }.marquee span { font-size:1rem; margin:0 22px; } @keyframes marquee { to { transform:translateX(-35%); } }
.section { padding:115px 0 30px; }.section-label { align-items:baseline; gap:22px; }.section-label span:first-child { color:#8b91d2; }.about { display:grid; gap:70px; grid-template-columns:180px 1fr; }.about-content h2,.contact h2 { font-size:clamp(2.3rem, 5vw, 4.2rem); font-weight:600; letter-spacing:-.08em; line-height:1.08; max-width:800px; }.about-grid { display:grid; gap:45px; grid-template-columns:1fr 1fr; margin:35px 0; max-width:780px; }.about-grid p { color:var(--muted); font-size:.87rem; line-height:1.9; }
.skills { display:grid; gap:70px; grid-template-columns:180px 1fr; }.skill-list { border-top:1px solid var(--line); }.skill-item { align-items:center; border-bottom:1px solid var(--line); display:grid; gap:25px; grid-template-columns:40px 1fr 1.2fr 30px; padding:28px 0; }.skill-number { color:#8b91d2; font-family:"DM Mono",monospace; font-size:.65rem; }.skill-item h3 { font-size:1rem; letter-spacing:-.03em; }.skill-item p { color:var(--muted); font-size:.76rem; max-width:300px; }.skill-arrow { color:#8b91d2; font-size:1.4rem; }
.section-heading { align-items:end; display:flex; justify-content:space-between; margin-bottom:43px; }.section-heading > p { color:var(--muted); font-size:.8rem; line-height:1.6; text-align:right; }.project-grid { display:grid; gap:38px 28px; grid-template-columns:1fr 1fr; }.project-large { grid-column:span 2; }.project-visual { align-items:center; display:flex; height:330px; justify-content:center; overflow:hidden; position:relative; transition:transform .35s; }.project:hover .project-visual { transform:translateY(-7px); }.project-large .project-visual { height:420px; }.visual-purple { background:var(--purple); }.visual-green { background:var(--green); }.visual-orange { background:var(--orange); }.visual-symbol { color:#f5f5f0; font-family:Georgia,serif; font-size:12rem; line-height:1; }.visual-label { bottom:20px; font-family:"DM Mono",monospace; font-size:.63rem; left:22px; position:absolute; }.project-meta { align-items:flex-start; display:flex; justify-content:space-between; padding-top:17px; }.project-meta h3 { font-size:1.05rem; letter-spacing:-.04em; margin-bottom:5px; }.project-meta p { color:var(--muted); font-size:.74rem; max-width:360px; }.round-arrow { align-items:center; border:1px solid var(--line); border-radius:50%; display:flex; font-size:1.1rem; height:38px; justify-content:center; width:38px; }
.contact { align-items:center; background:var(--ink); color:#f5f5f0; display:flex; justify-content:space-between; margin-top:115px; min-height:410px; padding:75px 75px; position:relative; width:min(1280px, calc(100% - 80px)); }.contact .eyebrow { color:#aeb5a8; }.contact h2 { margin:25px 0 30px; }.contact-email { border-bottom:1px solid #6b706f; color:var(--lime); font-family:"DM Mono",monospace; font-size:.9rem; padding-bottom:8px; }.contact-email span { font-size:1.2rem; margin-left:20px; }.contact-stamp { align-items:center; border:1px solid #555b58; border-radius:50%; color:var(--lime); display:flex; font-family:"DM Mono",monospace; font-size:.68rem; height:145px; justify-content:center; line-height:1.8; text-align:center; transform:rotate(12deg); width:145px; }
.site-footer { align-items:center; color:#888d88; display:flex; font-family:"DM Mono",monospace; font-size:.62rem; justify-content:space-between; padding:35px 0 40px; }.site-footer b { color:#d4939b; font-size:1rem; }.socials { display:flex; gap:18px; }.socials a { color:var(--ink); font-weight:500; }
.sr-only { clip:rect(0,0,0,0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }
@media (max-width:760px) { .section-wrap,.site-header { width:calc(100% - 40px); }.site-header { padding:20px 0; }.menu-toggle { background:none; border:0; display:block; height:28px; position:relative; width:30px; z-index:11; }.menu-toggle span:not(.sr-only) { background:var(--ink); display:block; height:2px; margin:6px 0; transition:.2s; width:24px; }.site-nav { align-items:flex-start; background:var(--paper); flex-direction:column; gap:22px; height:100vh; padding:100px 30px; position:fixed; right:-100%; top:0; transition:right .3s; width:75%; z-index:10; }.site-nav.open { box-shadow:-12px 0 35px #00000012; right:0; }.site-nav .nav-contact { margin-top:10px; }.hero { display:block; min-height:0; padding:65px 0 90px; }.hero-copy h1 { font-size:3.5rem; }.hero-art { height:410px; margin-top:55px; }.portrait-card { height:350px; width:260px; }.about,.skills { display:block; }.about-content,.skill-list { margin-top:45px; }.about-grid { gap:20px; grid-template-columns:1fr; }.section { padding-top:85px; }.skill-item { align-items:start; gap:12px; grid-template-columns:30px 1fr 24px; }.skill-item p { grid-column:2 / 3; }.skill-arrow { grid-column:3; grid-row:1; }.section-heading { align-items:start; display:block; }.section-heading > p { margin-top:20px; text-align:left; }.project-grid { display:block; }.project { display:block; margin-bottom:40px; }.project-large .project-visual,.project-visual { height:300px; }.contact { align-items:flex-start; display:block; margin-top:80px; padding:55px 30px; width:calc(100% - 40px); }.contact-stamp { bottom:25px; height:95px; position:absolute; right:25px; width:95px; }.contact h2 { font-size:2.7rem; }.site-footer { align-items:flex-start; flex-wrap:wrap; gap:18px; }.site-footer > span:nth-child(2) { order:3; width:100%; } }