styles.css

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#10151d;--panel:#171d27;--panel2:#1c2430;--line:#303947;--text:#f0eee6;--muted:#a7aab1;--lime:#d5f66b;--blue:#7c9ff8;--mono:'DM Mono',monospace;--sans:'DM Sans',Arial,sans-serif;--display:'Space Grotesk',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible,iframe:focus-visible{outline:2px solid var(--lime);outline-offset:4px}.wrap{width:min(1320px,calc(100% - 96px));margin-inline:auto}.skip-link{position:absolute;top:-100px;left:16px;background:var(--lime);color:#10151d;padding:12px;z-index:20}.skip-link:focus{top:12px}.site-header{height:88px;padding:0 48px;display:flex;align-items:center;gap:36px;border-bottom:1px solid var(--line);position:relative;z-index:5;background:rgba(16,21,29,.94);backdrop-filter:blur(12px)}.wordmark{display:flex;align-items:center;gap:13px;font:700 16px var(--display);letter-spacing:-.02em}.mark{width:38px;height:38px;border:1px solid var(--lime);border-radius:11px;display:grid;place-items:center;font:700 22px var(--display);letter-spacing:-.09em}.mark span{color:var(--lime)}.main-nav{display:flex;gap:36px;margin-left:auto;font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#b7bbc4}.main-nav a:hover,.hero-links a:hover,.video-caption a:hover{color:var(--lime)}.header-resume{margin-left:24px;padding:13px 18px;border:1px solid #67717c;border-radius:100px;font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.header-resume span{margin-left:10px;color:var(--lime)}.header-resume:hover{background:var(--lime);border-color:var(--lime);color:#10151d}.header-resume:hover span{color:#10151d}.hero{display:grid;grid-template-columns:1.25fr .85fr;gap:54px;min-height:700px;padding-block:110px 104px;align-items:center}.eyebrow,.section-index,.project-number,.project-date,.project-kicker,.video-intro,.video-caption,.visual-label{font:500 11px var(--mono);letter-spacing:.13em;text-transform:uppercase}.eyebrow{color:var(--lime);display:flex;align-items:center;gap:12px;white-space:nowrap}.status-dot{display:block;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 18px var(--lime)}.eyebrow-line{height:1px;width:26px;background:#626c5b}.hero h1{font:600 clamp(70px,7vw,118px)/.98 var(--display);letter-spacing:-.085em;margin:36px 0 30px}.hero h1 em,.section-heading h2 em{font-weight:400;font-style:normal;color:var(--lime)}.outline-word{-webkit-text-stroke:1.5px var(--text);color:transparent}.hero-intro{font-size:18px;line-height:1.7;max-width:575px;color:#bcc1cb;margin:0}.hero-actions{display:flex;gap:12px;margin-top:34px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;min-height:54px;padding:0 22px;border-radius:100px;font:600 13px var(--sans);transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}.button-primary{background:var(--lime);color:#10151d}.button-ghost{border:1px solid #67717c}.button span{font-size:19px;font-weight:400}.hero-links{display:flex;gap:28px;margin-top:70px;font:500 12px var(--mono);color:#aeb3bd}.hero-visual{position:relative;aspect-ratio:1;max-width:490px;width:100%;justify-self:end;overflow:hidden;border:1px solid var(--line);border-radius:50%;background:radial-gradient(circle at center,#263142 0%,#1b222e 45%,#111720 73%)}.visual-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle,#000 20%,transparent 78%)}.orbit{position:absolute;border:1px solid #849bad69;border-radius:50%;inset:10%;transform:rotate(-29deg) scaleY(.62)}.orbit-inner{inset:24%;transform:rotate(51deg) scaleY(.72);border-color:#d5f66b88}.orb{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--lime);box-shadow:0 0 28px #d5f66b8c}.orb-one{top:21%;left:21%}.orb-two{right:13%;bottom:28%;width:9px;height:9px;background:var(--blue)}.visual-center{position:absolute;inset:32%;border-radius:50%;background:#121923;border:1px solid #6f828f;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 80px #d5f66b18}.visual-center strong{font:600 clamp(48px,6vw,80px)/1 var(--display);letter-spacing:-.1em}.visual-center small{font:400 8px var(--mono);letter-spacing:.1em;color:#a6b1b5;margin-top:8px;white-space:nowrap}.visual-cross{position:absolute;top:-47px;right:-27px;color:var(--lime);font-size:40px}.visual-label{position:absolute;color:#aeb5b9;font-size:9px}.label-top{top:14%;right:20%}.label-bottom{bottom:15%;left:15%}.label-bottom span{color:var(--lime)}.section{padding:110px 0}.projects-section{border-top:1px solid var(--line);background:#131a23}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:50px}.section-index{color:var(--lime)}.section-heading h2{font:600 clamp(50px,5vw,78px)/1.1 var(--display);letter-spacing:-.065em;margin:20px 0 0}.section-heading p{max-width:290px;color:var(--muted);line-height:1.55;margin:0 0 8px}.feature-project{border:1px solid #43505d;border-radius:24px;background:var(--panel);overflow:hidden}.feature-top{display:flex;justify-content:space-between;padding:20px 29px;border-bottom:1px solid var(--line);color:#bdc3ca}.project-number{color:var(--lime)}.feature-content{display:grid;grid-template-columns:1fr 1fr}.feature-copy{padding:58px 56px 48px}.project-kicker{color:var(--lime);display:flex;align-items:center;gap:11px}.project-icon{font-size:22px}.feature-copy h3{font:600 clamp(44px,4.6vw,70px)/1.05 var(--display);letter-spacing:-.065em;max-width:560px;margin:20px 0 23px}.project-lede{font-size:17px;line-height:1.6;color:#c6cbd0;max-width:530px}.project-points{list-style:none;padding:0;margin:28px 0 30px}.project-points li{position:relative;padding-left:20px;margin:11px 0;color:#aeb7bf;line-height:1.5;font-size:14px}.project-points li:before{content:'↗';position:absolute;left:0;color:var(--lime)}.tags{display:flex;flex-wrap:wrap;gap:8px}.tags span{border:1px solid #4a5662;color:#bfc9cf;border-radius:99px;padding:8px 11px;font:10px var(--mono)}.feature-art{margin:24px 24px 24px 0;min-height:455px;border:1px solid #536273;border-radius:16px;background:#0f1821;position:relative;overflow:hidden;box-shadow:inset 0 0 70px #75a6cd0d}.feature-art:before{content:'';position:absolute;inset:0;background:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:48px 48px}.monitor-top{position:relative;display:flex;justify-content:space-between;padding:19px 22px;border-bottom:1px solid #3c4652;font:10px var(--mono);letter-spacing:.12em;color:#b9c7ce}.monitor-top span:last-child{color:var(--lime)}.monitor-chart{height:260px;position:relative;padding:28px 18px}.monitor-chart svg{width:100%;height:100%;overflow:visible}.chart-crosshair{position:absolute;width:7px;height:7px;top:43%;left:64%;border-radius:50%;background:var(--lime);box-shadow:0 0 18px var(--lime)}.monitor-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;margin:0 16px 15px}.monitor-stats div{background:#1b2732;border:1px solid #3f4a55;border-radius:11px;padding:12px}.monitor-stats small{display:block;color:#84949d;font:9px var(--mono);margin-bottom:8px}.monitor-stats b{font:600 25px var(--display)}.monitor-stats b span{font-size:14px;color:var(--lime)}.monitor-stats .optimal{font:600 16px var(--display);color:var(--lime)}.video-area{border-top:1px solid var(--line);padding:30px}.video-intro{color:#bac6cd;margin:0 0 17px}.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.video-card{border:1px solid #3f4a57;border-radius:14px;overflow:hidden;background:#101720}.video-frame{aspect-ratio:16/9}.video-frame iframe{width:100%;height:100%;border:0}.video-caption{display:flex;justify-content:space-between;gap:15px;padding:15px 18px;color:#b8c2c7;font-size:10px}.video-caption a{white-space:nowrap}.placeholder-section{border-top:1px solid var(--line);min-height:350px}.placeholder-section h2{font:600 clamp(36px,5vw,65px)/1.1 var(--display);letter-spacing:-.06em;margin:28px 0}.site-footer{border-top:1px solid var(--line);padding:28px 0;color:#aab4bc;font:11px var(--mono)}.site-footer .wrap{display:flex;justify-content:space-between}.site-footer a{color:var(--lime)}
@media(max-width:1000px){.wrap{width:min(100% - 48px,800px)}.site-header{padding:0 24px}.hero{grid-template-columns:1fr;padding-block:80px}.hero-visual{justify-self:center;max-width:430px;grid-row:2}.feature-content{grid-template-columns:1fr}.feature-art{margin:0 24px 24px;min-height:385px}.feature-copy{padding:44px 34px 32px}.section-heading{align-items:start}.main-nav{gap:18px}}
@media(max-width:650px){.wrap{width:calc(100% - 36px)}.site-header{height:72px;padding:0 18px}.wordmark>span:last-child{display:none}.main-nav{gap:13px;font-size:10px}.header-resume{margin-left:0;padding:10px 12px;font-size:10px}.header-resume span{display:none}.hero{gap:44px;min-height:0;padding:70px 0 70px}.hero h1{font-size:clamp(55px,12vw,78px);margin:27px 0}.eyebrow{font-size:9px;gap:7px}.eyebrow-line{width:12px}.hero-intro{font-size:16px}.hero-actions{flex-wrap:wrap}.hero-links{margin-top:38px}.hero-visual{max-width:330px}.section{padding:72px 0}.section-heading{display:block;margin-bottom:28px}.section-heading h2{font-size:clamp(43px,10vw,58px)}.section-heading p{margin:16px 0 0}.feature-top{padding:16px;font-size:9px}.feature-copy{padding:35px 22px 26px}.feature-copy h3{font-size:48px}.project-lede{font-size:16px}.feature-art{margin:0 12px 12px;min-height:310px}.monitor-chart{height:186px}.monitor-stats b{font-size:17px}.monitor-stats .optimal{font-size:11px}.video-area{padding:17px}.video-grid{grid-template-columns:1fr}.site-footer .wrap{gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
.site-header{position:sticky;top:0}.section-heading-small{margin-bottom:38px}.section-heading-small h2{font-size:clamp(46px,5vw,70px)}.more-work-section{background:#131a23;padding-top:0}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.project-card{border:1px solid #3d4854;border-radius:21px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column}.card-art{height:360px;position:relative;overflow:hidden}.lunar-art{background:radial-gradient(circle at 70% 25%,#313656,#171e2f 50%,#10171f 80%)}.lunar-stars{position:absolute;inset:0;background-image:radial-gradient(#ffffffaa 1px,transparent 1px);background-size:43px 47px;opacity:.32}.lunar-planet{position:absolute;width:350px;height:350px;right:-75px;bottom:-190px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#868ca5,#3c435e 48%,#1b263d 72%);box-shadow:0 0 70px #a2a8f84f}.lunar-path{position:absolute;inset:0;width:100%;height:100%}.lunar-ship{position:absolute;top:46px;left:29px;font-size:58px;color:var(--lime);transform:rotate(-28deg);text-shadow:0 0 20px var(--lime)}.art-code,.art-coordinate{position:absolute;font:10px/1.7 var(--mono);letter-spacing:.08em;color:#d6e4ed}.art-code{left:28px;bottom:24px}.art-coordinate{right:25px;top:25px}.movie-art{background:#292846}.movie-noise{position:absolute;inset:0;background:radial-gradient(circle at 76% 20%,#fa9c6b99,transparent 34%),radial-gradient(circle at 20% 90%,#7e6ee199,transparent 40%)}.movie-stack{position:absolute;border:1px solid #ffffff7a;background:#1c1c35;box-shadow:0 20px 70px #0007}.movie-stack-back{width:48%;height:220px;top:66px;left:17%;transform:rotate(-11deg);padding:20px}.movie-stack-back span,.movie-stack-front span{font:10px var(--mono);letter-spacing:.15em;color:#fff}.movie-stack-back b{display:block;margin-top:35px;font:700 27px/1.1 var(--display);letter-spacing:-.07em;color:#fff}.movie-stack-front{width:45%;height:250px;right:15%;top:52px;transform:rotate(8deg);padding:20px;background:linear-gradient(160deg,#f0ab82,#8e698d 55%,#292c58)}.movie-stack-front b{display:block;margin-top:35px;font:700 116px/1 var(--display);color:#fff8}.movie-stack-front small{font:11px var(--mono);color:#fff}.movie-orb{position:absolute;width:85px;height:85px;border-radius:50%;border:1px solid #ffffffaa;left:12%;top:40px}.card-body{padding:28px 30px 0;display:flex;flex-direction:column;flex:1}.card-meta{display:flex;justify-content:space-between;gap:12px;color:var(--lime);font:10px var(--mono);letter-spacing:.1em}.card-body h3{font:600 42px/1.08 var(--display);letter-spacing:-.06em;margin:22px 0 14px}.card-body p{color:#b9c2c9;line-height:1.65;font-size:15px;margin:0 0 24px}.card-body .tags{margin-top:auto;margin-bottom:28px}.card-bottom{border-top:1px solid #3d4854;padding:20px 0;display:flex;justify-content:space-between;align-items:center;color:#c5cbd0;font:11px var(--mono);text-transform:uppercase;letter-spacing:.06em}.card-bottom span:last-child{color:var(--lime);font-size:18px}.card-link:hover{color:var(--lime)}.about-section{border-top:1px solid var(--line);background:#10151d}.about-grid{display:grid;grid-template-columns:1fr .88fr;gap:10%;align-items:center}.about-grid h2,.contact-grid h2{font:600 clamp(46px,5vw,70px)/1.08 var(--display);letter-spacing:-.065em;margin:25px 0}.about-grid h2 em,.contact-grid h2 em{font-weight:400;font-style:normal;color:var(--lime)}.about-grid p,.contact-grid p{font-size:17px;line-height:1.7;color:#b7c1c9;max-width:600px}.text-link{display:inline-flex;gap:34px;margin-top:20px;padding-bottom:9px;border-bottom:1px solid var(--lime);font:600 13px var(--sans)}.text-link span{color:var(--lime)}.detail-row{display:grid;grid-template-columns:115px 1fr;gap:16px;padding:25px 0;border-bottom:1px solid #394451}.detail-row:first-child{border-top:1px solid #394451}.detail-row>span,.skill-group>span{font:10px var(--mono);color:var(--lime);letter-spacing:.1em}.detail-row strong{display:block;font:600 16px var(--display);margin-bottom:7px}.detail-row small{color:#aab5bc;line-height:1.4}.skills-section{background:#151d27;border-top:1px solid var(--line)}.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #394451;border-bottom:1px solid #394451}.skill-group{padding:26px 30px 34px;border-right:1px solid #394451}.skill-group:first-child{padding-left:0}.skill-group:last-child{border:0}.skill-group p{font:500 21px/1.8 var(--display);letter-spacing:-.03em;margin:20px 0 0}.skill-group b{color:var(--lime);font:400 14px var(--mono);margin-inline:4px}.contact-section{background:#d5f66b;color:#10151d}.contact-section .section-index{color:#3f5621}.contact-grid{display:grid;grid-template-columns:1fr .85fr;gap:8%;align-items:center}.contact-grid h2 em{color:#536e27}.contact-grid p{color:#364734;margin-bottom:30px}.contact-section .button-primary{background:#10151d;color:var(--lime)}.contact-links a{display:grid;grid-template-columns:80px 1fr 20px;gap:20px;align-items:center;padding:25px 0;border-bottom:1px solid #6e8d43}.contact-links a:first-child{border-top:1px solid #6e8d43}.contact-links a:hover strong{text-decoration:underline}.contact-links span{font:10px var(--mono);letter-spacing:.1em}.contact-links strong{font:600 18px var(--display);overflow-wrap:anywhere}.contact-links b{font-size:19px;font-weight:400}.contact-section .button:focus-visible,.contact-links a:focus-visible{outline-color:#10151d}
@media(max-width:1000px){.about-grid,.contact-grid{grid-template-columns:1fr;gap:50px}.card-art{height:280px}.card-body{padding-inline:22px}.card-body h3{font-size:36px}.skills-grid{grid-template-columns:1fr}.skill-group{border-right:0;border-bottom:1px solid #394451;padding:25px 0}.skill-group:last-child{border-bottom:0}}
@media(max-width:650px){.project-grid{grid-template-columns:1fr}.card-art{height:300px}.more-work-section{padding-top:0}.about-grid h2,.contact-grid h2{font-size:48px}.detail-row{grid-template-columns:90px 1fr;gap:12px}.contact-links a{grid-template-columns:60px 1fr 15px;gap:12px}.contact-links strong{font-size:15px}.site-footer .wrap{flex-wrap:wrap}.site-footer .wrap span:nth-child(2){display:none}}

/* Shared navigation and social links */
section[id], article[id] { scroll-margin-top: 88px; }
.main-nav { gap: 27px; }
.main-nav a { white-space: nowrap; }
.mobile-menu { display: none; }
.hero-links a { display: inline-flex; align-items: center; gap: 8px; }
.social-icon { display: inline-block; width: 19px; height: 19px; object-fit: contain; flex: none; }
.icon-invert { filter: invert(1); }
.hero-links a span { color: var(--lime); margin-left: 2px; }
.visual-center { inset: 22%; background: #1a2530; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; border-radius: 50%; display: block; }
.photo-mask { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
.hero-photo { object-position: center top; transform: scale(3.2); transform-origin: center top; }
.experience-section { background: var(--bg); border-top: 1px solid var(--line); }
.experience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.experience-card { display: flex; flex-direction: column; min-height: 315px; padding: 31px; border: 1px solid #3d4854; border-radius: 21px; background: var(--panel); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.experience-card:hover, .experience-card:focus-visible { transform: translateY(-4px); border-color: var(--lime); background: #202a34; }
.experience-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.experience-badge { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--lime); border-radius: 12px; font: 600 13px var(--mono); color: var(--lime); }
.experience-badge-blue { border-color: var(--blue); color: var(--blue); font-size: 22px; }
.experience-date { color: #aeb9c3; font: 10px var(--mono); letter-spacing: .1em; text-align: right; }
.experience-card h3 { font: 600 30px/1.1 var(--display); letter-spacing: -.045em; margin: 27px 0 6px; }
.experience-role { color: var(--lime) !important; font: 500 12px var(--mono) !important; margin: 0 0 17px !important; }
.experience-card p { color: #b9c2c9; line-height: 1.6; font-size: 14px; margin: 0 0 20px; }
.experience-card-link { display: flex; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 17px; border-top: 1px solid #3b4752; color: var(--lime); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.timeline-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 105px 0 35px; }
.timeline-heading h3 { font: 600 clamp(40px, 4vw, 58px)/1.1 var(--display); letter-spacing: -.06em; margin: 16px 0 0; }
.timeline-heading p { color: var(--muted); max-width: 290px; margin: 0; line-height: 1.6; }
.timeline { position: relative; display: flex; flex-direction: column; gap: 13px; list-style: none; margin: 0; padding: 0; }
.timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - .5px); width: 1px; background: linear-gradient(var(--lime), #506b6d 50%, var(--lime)); }
.timeline-item { position: relative; width: 50%; padding-right: 34px; }
.timeline-right { align-self: flex-end; padding-left: 34px; padding-right: 0; }
.timeline-item::before { content: ''; position: absolute; top: 32px; right: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px #789652; }
.timeline-right::before { right: auto; left: -5px; }
.timeline-card { display: flex; align-items: start; gap: 16px; min-height: 130px; padding: 21px; border: 1px solid #3b4752; border-radius: 17px; background: var(--panel); }
.timeline-link { cursor: pointer; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.timeline-link:hover, .timeline-link:focus-visible { transform: translateY(-3px) scale(1.012); border-color: var(--lime); background: #202a35; }
.timeline-icon { display: grid; place-items: center; flex: none; width: 39px; height: 39px; border-radius: 11px; background: #293745; border: 1px solid #6b8087; color: var(--lime); font: 600 12px var(--mono); }
.timeline-icon img { width: 22px; height: 22px; object-fit: contain; }
.timeline-date { color: var(--lime); font: 500 10px var(--mono); letter-spacing: .1em; }
.timeline-card h4 { font: 600 18px/1.2 var(--display); letter-spacing: -.025em; margin: 8px 0 7px; }
.timeline-card p { color: #aeb9c2; font-size: 13px; line-height: 1.45; margin: 0; }
.timeline-more { display: inline-block; color: var(--lime); font: 10px var(--mono); text-transform: uppercase; margin-top: 13px; }
.project-see-more { margin-top: 28px; min-width: 165px; }
.project-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: auto; padding: 19px 0; border-top: 1px solid #3d4854; color: #c5cbd0; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.project-card-actions a { color: var(--lime); white-space: nowrap; }
.project-card-actions a:hover { text-decoration: underline; }
.project-card-actions .code-link { color: #c5cbd0; }
.project-card-actions .code-link:hover { color: var(--lime); }
.about-details { border: 1px solid #394451; border-radius: 19px; padding: 0 25px; background: #171e28; }
.detail-row { grid-template-columns: 105px 1fr; }
.detail-row:first-child { border-top: 0; }
.detail-row:last-child { border-bottom: 0; }
.skill-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; list-style: none; padding: 0; margin: 21px 0 0; }
.skill-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid #3a4854; border-radius: 11px; background: #1c2732; color: #e6e9e8; font: 500 12px var(--sans); transition: transform .2s ease, border-color .2s ease; }
.skill-list li:hover { transform: translateY(-2px); border-color: #7f9984; }
.skill-list img { flex: none; width: 25px; height: 25px; object-fit: contain; }
.skill-list img[src$="expo.svg"] { filter: invert(1); }
.contact-links a { grid-template-columns: 24px 62px 1fr 20px; gap: 14px; }
.contact-links .social-icon { width: 21px; height: 21px; }
@media (max-width: 1100px) { .main-nav { gap: 16px; font-size: 10px; } .wordmark { font-size: 14px; } .header-resume { margin-left: 0; } }
@media (max-width: 780px) { .main-nav { display: none; } .mobile-menu { display: block; margin-left: auto; position: relative; } .mobile-menu summary { list-style: none; cursor: pointer; border: 1px solid #67717c; border-radius: 100px; padding: 11px 14px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; } .mobile-menu summary::-webkit-details-marker { display: none; } .mobile-menu summary span { color: var(--lime); margin-left: 7px; } .mobile-menu nav { position: absolute; right: 0; top: calc(100% + 12px); min-width: 190px; display: flex; flex-direction: column; gap: 0; border: 1px solid #56626b; border-radius: 14px; overflow: hidden; background: #1b2530; box-shadow: 0 20px 40px #0008; } .mobile-menu nav a { padding: 12px 17px; font: 500 12px var(--mono); text-transform: uppercase; } .mobile-menu nav a:hover { background: #293745; color: var(--lime); } .experience-grid { grid-template-columns: 1fr; } .timeline-heading { margin-top: 70px; } }
@media (max-width: 650px) { .hero-links { flex-wrap: wrap; gap: 17px; } .hero-links a { font-size: 11px; } .social-icon { width: 17px; height: 17px; } .experience-card { min-height: 0; padding: 23px; } .timeline-heading { display: block; } .timeline-heading p { margin-top: 12px; } .timeline::before { left: 5px; } .timeline-item, .timeline-right { align-self: stretch; width: 100%; padding: 0 0 0 28px; } .timeline-item::before, .timeline-right::before { left: 1px; right: auto; } .timeline-card { min-height: 0; padding: 17px; } .timeline-card h4 { font-size: 16px; } .timeline-icon { width: 35px; height: 35px; } .project-card-actions { flex-wrap: wrap; } .skill-list li { padding: 8px; } .skill-list img { width: 21px; height: 21px; } .contact-links a { grid-template-columns: 21px 1fr 17px; gap: 11px; } .contact-links a span { display: none; } .contact-links strong { font-size: 15px; } .mobile-menu summary { padding: 10px; } .header-resume { margin-left: 0; } }
@media (max-width: 650px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-copy { display: contents; }
  .hero .eyebrow { order: 1; }
  .hero h1 { order: 2; margin-bottom: 23px; }
  .hero-visual { order: 3; align-self: center; width: min(100%, 250px); margin-bottom: 27px; grid-row: auto; }
  .hero-intro { order: 4; }
  .hero-actions { order: 5; }
  .hero-links { order: 6; }
}
@media (prefers-reduced-motion: reduce) { .experience-card, .timeline-link, .skill-list li { transition: none; } .experience-card:hover, .timeline-link:hover, .skill-list li:hover { transform: none; } }

/* Refined identity and project cards */
.mark { position: relative; overflow: hidden; }
.mark .monogram { display: block; position: relative; width: 29px; height: 30px; color: var(--text); font: italic 600 28px/.95 'Cormorant Garamond', Georgia, serif; letter-spacing: -.14em; transform: rotate(-8deg); }
.mark .monogram span { position: absolute; left: 12px; top: 7px; font-size: 25px; color: var(--lime); }
.hero-photo { transform: translateX(-5%) scale(2.7); transform-origin: center top; }
.experience-logo { width: 76px; height: 54px; border-color: #52606b; background: #fff; padding: 6px; overflow: hidden; }
.experience-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.project-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-grid-three .card-art { height: 280px; }
.project-grid-three .card-body { padding: 24px 24px 0; }
.project-grid-three .card-body h3 { font-size: clamp(30px, 2.7vw, 39px); margin: 18px 0 5px; }
.project-grid-three .card-body p:not(.card-period) { font-size: 14px; line-height: 1.6; }
.project-grid-three .card-meta { font-size: 9px; }
.card-period { color: var(--lime) !important; font: 500 10px var(--mono) !important; letter-spacing: .02em; margin: 0 0 17px !important; }
.nasa-art.feature-art { margin: 0; min-height: 0; border: 0; border-radius: 0; }
.nasa-art .monitor-top { font-size: 8px; padding: 15px 14px; }
.nasa-art .monitor-chart { height: 152px; padding: 15px; }
.nasa-art .monitor-stats { margin: 0 10px; }
.nasa-art .monitor-stats div { padding: 8px; }
.nasa-art .monitor-stats small { font-size: 7px; }
.nasa-art .monitor-stats b { font-size: 17px; }
.nasa-art .monitor-stats .optimal { font-size: 11px; }
.lunar-cover { background: #050509; }
.lunar-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 63%; }
.cover-label { position: absolute; top: 17px; left: 17px; z-index: 1; padding: 8px 11px; border: 1px solid #9baa8c99; border-radius: 999px; background: #10151dd9; color: var(--lime); font: 9px var(--mono); letter-spacing: .1em; }
.project-grid-three .movie-stack-back { left: 12%; }
.project-grid-three .movie-stack-front { right: 10%; }
.project-grid-three .movie-stack-back b { font-size: 23px; }
.project-grid-three .movie-stack-front b { font-size: 88px; }
.project-card-actions .code-link { display: inline-flex; align-items: center; gap: 7px; }
.project-card-actions .code-link img { width: 16px; height: 16px; filter: invert(1); }
.about-details .detail-row { display: grid; grid-template-columns: 25px 85px 1fr; gap: 14px; align-items: start; }
.about-icon { width: 22px; height: 22px; object-fit: contain; }
.skill-list .pygame-logo { width: 25px; height: 25px; object-fit: cover; object-position: right; }
.contact-links strong { display: block; }
.contact-links strong small { display: block; margin-top: 5px; font: 400 12px var(--mono); color: #415738; overflow-wrap: anywhere; }
@media (max-width: 1150px) { .project-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .project-grid-three { grid-template-columns: 1fr; } .project-grid-three .card-art { height: 265px; } }
@media (max-width: 650px) { .about-details .detail-row { grid-template-columns: 22px 76px 1fr; gap: 9px; } .contact-links strong small { font-size: 10px; } .experience-logo { width: 64px; height: 47px; } }

/* Centered navigation and real project imagery */
.site-header { justify-content: space-between; }
.main-nav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; gap: 2px; padding: 6px; border: 1px solid #48535e; border-radius: 999px; background: #1c2530; }
.main-nav a { padding: 9px 12px; border-radius: 999px; transition: background .2s ease, color .2s ease; }
.main-nav a:hover, .main-nav a:focus-visible { background: #354252; color: var(--lime); }
.header-resume { margin-left: auto; }
.label-top { top: 12%; left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
.label-left { left: 8%; top: 40%; }
.label-left span, .label-bottom span { color: var(--lime); }
.label-bottom { left: 50%; bottom: 13%; transform: translateX(-50%); white-space: nowrap; }
.visual-cross { display: none; }
.project-photo { background: #121923; }
.project-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nasa-cover img { object-position: 55% center; }
.valid-cover img { transform: scale(1.13); object-position: center; }
@media (max-width: 1100px) { .main-nav { gap: 0; } .main-nav a { padding: 9px 8px; } }
@media (max-width: 780px) { .main-nav { display: none; } }
@media (max-width: 650px) { .eyebrow { white-space: normal; flex-wrap: wrap; } .label-top { font-size: 7px; } .label-left { font-size: 8px; left: 7%; } .label-bottom { font-size: 7px; } }

/* Theme control, animated hero, and final refinements */
html, body, .site-header, .project-card, .experience-card, .timeline-card, .about-section, .skills-section, .detail-main, .detail-content, .detail-media, .detail-document, .detail-repository, .detail-next { transition: background-color .28s ease, color .28s ease, border-color .28s ease; }
.theme-toggle { display: grid; place-items: center; flex: none; width: 42px; height: 42px; margin-left: auto; border: 1px solid #67717c; border-radius: 50%; background: transparent; color: var(--lime); cursor: pointer; font: 20px/1 var(--sans); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.theme-toggle:hover, .theme-toggle:focus-visible { transform: translateY(-2px); background: #27323e; border-color: var(--lime); }
.theme-toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.header-resume { margin-left: 0; }
.build-line { display: block; min-height: 1.15em; margin-top: .08em; font-size: clamp(34px,3.6vw,56px); letter-spacing: -.06em; white-space: nowrap; }
.typed-text { color: var(--lime); }
.typing-cursor { display: inline-block; width: .08em; height: .83em; margin-left: .08em; background: var(--lime); vertical-align: -.03em; animation: cursor-blink .8s steps(1) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.hero-actions { margin-top: 27px; }
.hero-links { gap: 10px; margin-top: 38px; }
.hero-links a { padding: 9px 11px; border: 1px solid #3c4855; border-radius: 999px; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.hero-links a:hover, .hero-links a:focus-visible { transform: translateY(-2px); border-color: var(--lime); background: #1b2530; }
.visual-label span { color: var(--lime); }
.label-left { left: 7%; top: 48%; }
.label-right { right: -7%; top: 50%; transform: rotate(90deg); transform-origin: center; white-space: nowrap; }
.label-bottom { bottom: 9%; }
.experience-card:nth-child(2) .experience-logo img { transform: translateY(-1px); }
.project-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.project-card:hover, .project-card:focus-within { transform: translateY(-5px) scale(1.008); border-color: var(--lime); box-shadow: 0 18px 45px #0003; }
.project-grid-three .lunar-card .card-body h3 { font-size: clamp(27px,2.35vw,35px); line-height: 1.12; }
.about-details .detail-row > span { font-size: 11px; font-weight: 500; }
.card-meta { justify-content: flex-start; }

/* Light theme uses purpose-selected surfaces and contrast rather than color inversion. */
:root[data-theme="light"] { --bg:#f4f1e8; --panel:#fffdf7; --panel2:#ebe7dc; --line:#c9c3b5; --text:#17202a; --muted:#5f6770; --lime:#557514; --blue:#365fc1; }
:root[data-theme="light"] body { background:var(--bg); color:var(--text); }
:root[data-theme="light"] .site-header { background:rgba(244,241,232,.94); }
:root[data-theme="light"] .main-nav { background:#fffdf8; border-color:#c7c0b2; color:#4f5962; box-shadow:0 6px 22px #3a372f12; }
:root[data-theme="light"] .main-nav a:hover, :root[data-theme="light"] .main-nav a:focus-visible { background:#e8edd8; color:#344f0c; }
:root[data-theme="light"] .theme-toggle, :root[data-theme="light"] .header-resume, :root[data-theme="light"] .mobile-menu summary { border-color:#9b978d; color:#415b10; }
:root[data-theme="light"] .theme-toggle:hover, :root[data-theme="light"] .theme-toggle:focus-visible { background:#e3e8d4; }
:root[data-theme="light"] .hero-intro, :root[data-theme="light"] .about-grid p, :root[data-theme="light"] .detail-lede, :root[data-theme="light"] .detail-prose p, :root[data-theme="light"] .detail-repository p, :root[data-theme="light"] .detail-media-header p, :root[data-theme="light"] .detail-next p { color:#4f5962; }
:root[data-theme="light"] .hero-links { color:#46515b; }
:root[data-theme="light"] .hero-links a { border-color:#b9b4aa; background:#faf8f1; }
:root[data-theme="light"] .hero-links a:hover { background:#e9eedc; }
:root[data-theme="light"] .icon-invert, :root[data-theme="light"] .project-card-actions .code-link img, :root[data-theme="light"] .github-button img { filter:none; }
:root[data-theme="light"] .hero-visual { background:radial-gradient(circle at center,#dfe6e7 0%,#d1d9dc 45%,#ece9df 75%); }
:root[data-theme="light"] .visual-grid { opacity:.45; }
:root[data-theme="light"] .visual-label { color:#33404a; }
:root[data-theme="light"] .experience-section, :root[data-theme="light"] .about-section, :root[data-theme="light"] .detail-main, :root[data-theme="light"] .detail-repository, :root[data-theme="light"] .detail-next { background:#f4f1e8; }
:root[data-theme="light"] .projects-section, :root[data-theme="light"] .skills-section, :root[data-theme="light"] .detail-content { background:#eae7de; }
:root[data-theme="light"] .detail-media, :root[data-theme="light"] .detail-document { background:#f0ede5; }
:root[data-theme="light"] .experience-card, :root[data-theme="light"] .project-card, :root[data-theme="light"] .timeline-card, :root[data-theme="light"] .about-details, :root[data-theme="light"] .skill-list li { background:#fffdf7; border-color:#c8c2b6; }
:root[data-theme="light"] .experience-card:hover, :root[data-theme="light"] .experience-card:focus-visible, :root[data-theme="light"] .timeline-link:hover, :root[data-theme="light"] .timeline-link:focus-visible { background:#f7faee; }
:root[data-theme="light"] .experience-card p, :root[data-theme="light"] .timeline-card p, :root[data-theme="light"] .card-body p, :root[data-theme="light"] .detail-row small, :root[data-theme="light"] .contact-links strong small { color:#56606a; }
:root[data-theme="light"] .experience-date { color:#59636c; }
:root[data-theme="light"] .timeline-icon img, :root[data-theme="light"] .about-icon { filter:brightness(.58) saturate(1.35); }
:root[data-theme="light"] .tags span, :root[data-theme="light"] .project-card-actions, :root[data-theme="light"] .experience-card-link, :root[data-theme="light"] .detail-row, :root[data-theme="light"] .skills-grid, :root[data-theme="light"] .skill-group { border-color:#c8c2b6; }
:root[data-theme="light"] .tags span, :root[data-theme="light"] .project-card-actions .code-link, :root[data-theme="light"] .skill-list li { color:#3f4a54; }
:root[data-theme="light"] .timeline::before { background:linear-gradient(var(--lime),#9aa58c 50%,var(--lime)); }
:root[data-theme="light"] .timeline-icon { background:#edf1e4; border-color:#a8b09e; }
:root[data-theme="light"] .detail-figure, :root[data-theme="light"] .single-video, :root[data-theme="light"] .video-card { border-color:#bdb8ad; }
:root[data-theme="light"] .button-ghost { border-color:#777d78; }
:root[data-theme="light"] .github-button { color:#17202a; }
:root[data-theme="light"] .resume-heading p, :root[data-theme="light"] .resume-fallback, :root[data-theme="light"] .document-fallback { color:#59636c; }
:root[data-theme="light"] .site-footer { color:#58626a; }
:root[data-theme="light"] .mobile-menu nav { background:#fffdf7; border-color:#bcb6ab; box-shadow:0 20px 40px #4c493822; }
:root[data-theme="light"] .mobile-menu nav a:hover { background:#e8edd8; }
@media (max-width: 1100px) { .theme-toggle { width: 38px; height: 38px; font-size: 18px; } }
@media (max-width: 780px) { .theme-toggle { margin-left: 0; } }
@media (max-width: 650px) { .build-line { font-size: clamp(20px,6vw,30px); letter-spacing:-.055em; } .hero-links { gap: 8px; } .hero-links a { padding: 8px 9px; } .label-left { left: 5%; } .label-right { right: -9%; font-size: 6.5px; } .label-bottom { bottom: 8%; } .theme-toggle { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .typing-cursor { animation:none; } .project-card, .hero-links a, html, body { transition:none; } }

/* Version 1 layout stability and section-flow refinements */
@media (min-width:1001px) {
  .hero { grid-template-columns:minmax(0,1fr) 490px; }
  .hero-copy { min-width:0; }
  .hero-visual { width:490px; height:490px; max-width:none; transform:translateX(16px); }
}
@media (max-width:1000px) {
  .hero-visual { width:min(100%,430px); height:auto; transform:none; }
}
.orb-three { top:14%; right:27%; width:7px; height:7px; background:#ff8b6a; box-shadow:0 0 18px #ff8b6a80; }
.orb-four { left:18%; bottom:22%; width:8px; height:8px; background:#b79cff; box-shadow:0 0 18px #b79cff80; }
.orb-five { left:10%; top:66%; width:6px; height:6px; background:#65d6c4; box-shadow:0 0 18px #65d6c480; }
.label-right { right:1.5%; top:45%; width:84px; transform:none; white-space:normal; line-height:1.35; }
.label-bottom { bottom:8%; }
.experience-card:nth-child(2) .experience-logo { align-items:center; justify-items:center; }
.experience-card:nth-child(2) .experience-logo img { object-position:center center; transform:translateY(-3px); }
.timeline-section { border-top:1px solid var(--line); background:var(--bg); }
.timeline-section .timeline-heading { margin:0 0 35px; }
.timeline-card { transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.timeline-card:hover, .timeline-card:focus-visible { transform:translateY(-3px) scale(1.012); border-color:var(--lime); background:#202a35; box-shadow:0 13px 30px #0002; }
.project-grid-three .nasa-card .card-body h3 { font-size:clamp(27px,2.3vw,35px); line-height:1.12; }
.project-grid-three .lunar-card .card-body h3 { font-size:clamp(30px,2.7vw,39px); }
.card-meta span { overflow-wrap:anywhere; }
.about-details .detail-row { grid-template-columns:25px 94px 1fr; gap:16px; padding-block:28px; }
.about-details .detail-row > span { font-size:12px; line-height:1.35; }
:root[data-theme="light"] .timeline-card:hover, :root[data-theme="light"] .timeline-card:focus-visible { background:#f7faee; }
@media (max-width:650px) {
  .hero-visual { width:min(100%,250px); }
  .label-right { right:0; top:43%; width:54px; font-size:6.5px; line-height:1.4; }
  .label-bottom { bottom:7%; max-width:145px; text-align:center; }
  .orb-three { top:12%; right:24%; width:5px; height:5px; }
  .orb-four { left:17%; bottom:20%; width:6px; height:6px; }
  .orb-five { left:9%; top:66%; width:5px; height:5px; }
  .about-details .detail-row { grid-template-columns:22px 82px 1fr; gap:10px; padding-block:25px; }
  .about-details .detail-row > span { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .timeline-card:hover, .timeline-card:focus-visible { transform:none; }
}

/* Recruiter-focused project summaries and action hierarchy */
.project-grid-three .card-body .project-outcome {
  display:flex;
  align-items:center;
  gap:9px;
  margin:-4px 0 22px;
  color:var(--lime);
  font:500 11px/1.4 var(--mono);
  letter-spacing:.02em;
}
.project-outcome::before { content:''; flex:none; width:6px; height:6px; border-radius:50%; background:var(--lime); }
.project-card-actions { gap:10px; }
.project-card-actions .project-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:10px 13px;
  border:1px solid var(--lime);
  border-radius:999px;
  background:var(--lime);
  color:#10151d;
  font-weight:600;
  text-decoration:none;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.project-card-actions .project-primary:hover,
.project-card-actions .project-primary:focus-visible { transform:translateY(-2px); background:#edffaf; border-color:#edffaf; text-decoration:none; }
.project-card-actions .code-link { font-size:10px; }
:root[data-theme="light"] .project-card-actions .project-primary { background:#557514; border-color:#557514; color:#fff; }
:root[data-theme="light"] .project-card-actions .project-primary:hover,
:root[data-theme="light"] .project-card-actions .project-primary:focus-visible { background:#38530b; border-color:#38530b; }
@media (prefers-reduced-motion:reduce) { .project-card-actions .project-primary { transition:none; } .project-card-actions .project-primary:hover { transform:none; } }