.hero-art { overflow: hidden; }

:root { --ink: #161616; --paper: #f4f1eb; --muted: #74716a; --line: #d8d3c9; --orange: #ff714b; --lime: #d9ef45; --blue: #9fd9e7; --pink: #efacc8; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.site-header { height: 76px; max-width: 1240px; margin: auto; padding: 0 32px; display: flex; align-items: center; gap: 42px; border-bottom: 1px solid var(--line); }
.logo { font: 700 20px 'Space Mono', monospace; letter-spacing: 0; margin-right: auto; }.logo span { color: var(--orange); }
.nav { display: flex; gap: 28px; font-size: 14px; }.nav a, .header-link { transition: color .2s ease; }.nav a:hover, .header-link:hover { color: var(--orange); }
.header-link { font-size: 14px; font-weight: 700; }.header-link span, .text-link span, .contact-email span { color: var(--orange); margin-left: 6px; }
.menu-toggle { display: none; background: none; border: 0; padding: 8px; }.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px; }
.section-wrap { max-width: 1240px; margin: auto; padding-left: 32px; padding-right: 32px; }.hero { min-height: 650px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; padding-top: 56px; padding-bottom: 70px; }
.eyebrow, .section-kicker, .card-number, .floating-label, .os-strip, .code-top, .contact-footer { font: 11px 'Space Mono', monospace; letter-spacing: .04em; text-transform: uppercase; }.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--muted); }.status-dot { width: 8px; height: 8px; background: #7bbd45; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 4px #e3efd6; }.profile-photo { display: block; width: 74px; height: 74px; margin-top: 24px; border: 4px solid var(--paper); outline: 1px solid var(--ink); border-radius: 50%; object-fit: cover; object-position: center 24%; }
h1 { max-width: 590px; margin: 23px 0; font-size: clamp(52px, 7vw, 92px); line-height: .92; letter-spacing: -.055em; font-weight: 700; }.hero h1 em, .contact-content em { color: var(--orange); font-style: normal; }.hero-text { color: var(--muted); max-width: 390px; font-size: 17px; line-height: 1.55; }.hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 34px; }.button { display: inline-flex; align-items: center; gap: 20px; padding: 15px 18px; font-size: 13px; font-weight: 700; }.button-dark { color: #fff; background: var(--ink); }.button-dark span { color: var(--lime); font-size: 18px; }.text-link { font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.hero-art { min-height: 440px; position: relative; display: grid; place-items: center; }.code-card { width: min(100%, 450px); z-index: 2; background: #24242a; color: #f4f1eb; box-shadow: 19px 19px 0 rgba(22,22,22,.09); transform: rotate(-4deg); }.code-top { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #46464a; color: #9f9da0; font-size: 10px; }.window-dots { display: flex; gap: 5px; }.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }.window-dots i:nth-child(2) { background: var(--lime); }.window-dots i:nth-child(3) { background: var(--blue); }.code-card pre { margin: 0; padding: 34px 28px 28px; min-height: 205px; font: 14px/1.8 'Space Mono', monospace; }.code-purple { color: #c4a9ec; }.code-blue { color: #87d9ea; }.code-green { color: #d9ef45; }.code-muted { color: #77777c; }.code-line { height: 5px; margin: 0 28px 25px; background: #45454a; }.code-line span { display: inline-block; height: 5px; background: #d9ef45; width: 16%; }.code-line span:nth-child(2) { width: 28%; background: #87d9ea; }.code-line span:nth-child(3) { width: 10%; background: #c4a9ec; }
.orbit { position: absolute; border: 1px solid var(--ink); border-radius: 50%; opacity: .16; }.orbit-one { width: 430px; height: 230px; transform: rotate(31deg); }.orbit-two { width: 380px; height: 280px; transform: rotate(-37deg); }.floating-label { position: absolute; background: var(--lime); padding: 9px 12px; z-index: 3; font-size: 9px; }.label-one { top: 60px; right: 0; transform: rotate(8deg); }.label-two { bottom: 47px; left: 13px; transform: rotate(-9deg); background: var(--orange); }.hero-stamp { position: absolute; z-index: 3; right: 4%; bottom: 4px; width: 77px; height: 77px; display: grid; place-content: center; border: 1px solid var(--ink); border-radius: 50%; text-align: center; transform: rotate(10deg); font: 8px/1.05 'Space Mono', monospace; }.hero-stamp strong { color: var(--orange); font-size: 17px; }
.intro-band { background: var(--ink); color: var(--paper); }.intro-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding-top: 100px; padding-bottom: 105px; }.section-kicker { color: var(--orange); margin: 7px 0 0; }.intro-band h2, .skills-section h2, .contact-section h2 { margin: 0; font-size: clamp(38px, 5vw, 65px); letter-spacing: -.05em; line-height: .98; }.intro-band h2 span, .skills-section h2 span { color: var(--lime); }.large-copy { color: #b8b4ab; max-width: 590px; margin: 35px 0 0; font-size: 19px; line-height: 1.55; }
.work-section { padding-top: 105px; padding-bottom: 105px; }.work-heading { margin-bottom: 42px; }.photo-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 12px; }.photo { margin: 0; background: #ded9cf; overflow: hidden; }.photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }.photo:hover img { transform: scale(1.03); }.printer-photo { height: 540px; position: relative; }.printer-photo img { object-position: center 45%; }.photo-stack { display: grid; grid-template-rows: 1fr; gap: 12px; }.photo-stack .photo { min-height: 264px; }.photo-stack .photo:first-child img { object-position: center 55%; }.photo figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 13px 15px; font-size: 13px; font-weight: 700; background: var(--paper); }.photo figcaption span { color: var(--orange); font: 10px 'Space Mono', monospace; }
.skills-section { padding-top: 105px; padding-bottom: 100px; }.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 55px; }.heading-note { margin: 0; color: var(--muted); font: 11px/1.5 'Space Mono', monospace; text-align: right; text-transform: uppercase; }.skills-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.skill-card { min-height: 365px; padding: 22px 21px 24px; position: relative; }.skill-orange { background: var(--orange); }.skill-lime { background: var(--lime); }.skill-blue { background: var(--blue); }.skill-pink { background: var(--pink); }.card-number { font-size: 10px; }.skill-icon { font: 700 29px 'Space Mono', monospace; margin: 38px 0 22px; }.skill-card h3 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.04em; }.skill-card p { min-height: 67px; margin: 0 0 20px; font-size: 13px; line-height: 1.45; }.skill-card ul { border-top: 1px solid rgba(22,22,22,.27); list-style: none; padding: 14px 0 0; margin: 0; font: 11px/1.55 'Space Mono', monospace; }.skill-card li { margin-bottom: 8px; }.skill-card small { display: block; font: 11px/1.4 'DM Sans', sans-serif; opacity: .65; }.os-strip { display: flex; align-items: center; gap: 17px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }.os-label { color: var(--orange); }.os-strip p { margin: 0 0 0 auto; color: var(--muted); font: 12px 'DM Sans', sans-serif; text-transform: none; letter-spacing: 0; }
.contact-section { background: var(--lime); }.contact-inner { padding-top: 83px; padding-bottom: 28px; }.contact-content { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 76px 0 115px; }.contact-content h2 { font-size: clamp(52px, 8vw, 105px); }.contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }.contact-email, .contact-telegram { display: inline-flex; align-items: center; gap: 7px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font: 700 clamp(17px, 2vw, 25px) 'Space Mono', monospace; white-space: nowrap; }.contact-email span, .contact-telegram > span:last-child { color: var(--ink); }.contact-telegram { border-bottom-color: transparent; padding-bottom: 0; }.telegram-icon { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #229ed9; }.telegram-icon svg { width: 16px; height: 16px; fill: #fff; transform: translate(-1px, 1px); }.contact-footer { display: flex; justify-content: space-between; color: #555c25; font-size: 10px; line-height: 1.5; }
@media (max-width: 800px) { .site-header { padding: 0 20px; gap: 18px; }.header-link { display: none; }.menu-toggle { display: block; }.nav { display: none; position: absolute; top: 76px; left: 0; right: 0; z-index: 5; padding: 20px; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; gap: 20px; }.nav.open { display: flex; }.section-wrap { padding-left: 20px; padding-right: 20px; }.hero { grid-template-columns: 1fr; gap: 30px; padding-top: 55px; min-height: auto; }.hero-art { min-height: 350px; }.code-card { width: 90%; }.orbit-one { width: 330px; height: 190px; }.orbit-two { width: 300px; height: 225px; }.intro-grid { grid-template-columns: 1fr; gap: 35px; padding-top: 65px; padding-bottom: 70px; }.work-section { padding-top: 70px; padding-bottom: 70px; }.photo-grid { grid-template-columns: 1fr; }.printer-photo { height: 450px; }.photo-stack { grid-template-columns: 1fr 1fr; grid-template-rows: 260px; }.photo-stack .photo { min-height: 0; }.photo figcaption { flex-direction: column; gap: 6px; }.skills-section { padding-top: 70px; padding-bottom: 70px; }.section-heading { align-items: start; flex-direction: column; gap: 22px; margin-bottom: 35px; }.heading-note { text-align: left; }.skills-grid { grid-template-columns: repeat(2, 1fr); }.skill-card { min-height: 390px; }.os-strip { flex-wrap: wrap; gap: 12px; }.os-strip p { flex-basis: 100%; margin-top: 7px; }.contact-content { align-items: start; flex-direction: column; margin: 58px 0 80px; }.contact-links { width: 100%; gap: 18px; }.contact-footer { flex-direction: column; gap: 24px; } }
@media (max-width: 500px) { h1 { font-size: 54px; }.hero-text { font-size: 16px; }.hero-art { min-height: 310px; }.code-card pre { padding: 24px 17px 20px; font-size: 11px; }.code-top { padding: 12px; }.code-line { margin-left: 17px; margin-right: 17px; }.floating-label { font-size: 8px; }.label-one { right: -2px; }.label-two { left: -2px; }.profile-photo { width: 66px; height: 66px; margin-top: 20px; }.printer-photo { height: 390px; }.photo-stack { grid-template-columns: 1fr; grid-template-rows: 240px auto; }.skills-grid { grid-template-columns: 1fr; }.skill-card { min-height: auto; }.skill-icon { margin-top: 28px; }.skill-card p { min-height: auto; }.contact-content h2 { font-size: 61px; }.contact-email { font-size: 14px; } }