@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{--paper:#f5f4ed;--ink:#203c36;--muted:#68736a;--teal:#245d4d;--orange:#c95631;--line:#d7dcd0;--mono:'IBM Plex Mono',monospace;--display:'Space Grotesk',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:5px}::selection{background:#cedd9b;color:var(--ink)}.section-wrap{max-width:1220px;margin:0 auto;padding-left:38px;padding-right:38px}.header{max-width:1360px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:27px 48px;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.6px}.brand-chip{font-family:var(--display);font-size:25px;letter-spacing:-2px;width:43px;height:43px;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;border-radius:7px}.brand-chip>span{color:var(--orange)}nav{display:flex;gap:30px;font-size:13px}nav a:hover,.text-link:hover,footer a:hover{color:var(--orange)}.contact-nav{font-size:13px;border-bottom:1px solid var(--ink);padding:7px 0}.contact-nav span{margin-left:18px}.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:50px;padding-top:75px;padding-bottom:70px}.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:1.7px;line-height:1.7;font-weight:500}.status-dot{display:inline-block;width:7px;height:7px;background:#5b8058;border-radius:50%;margin-right:8px;box-shadow:0 0 0 3px #5b805814}.hero h1{font-family:var(--display);font-size:clamp(44px,4.7vw,65px);letter-spacing:-3.7px;margin:28px 0 22px;font-weight:600;line-height:1.1}.orange{color:var(--orange)}.hero-line{font-family:var(--display);font-size:34px;line-height:1.22;letter-spacing:-1.2px;margin:0}.hero-line>span{color:#75916a}.intro{max-width:405px;font-size:15px;line-height:1.8;color:var(--muted);margin:25px 0 29px}.hero-actions{display:flex;align-items:center;gap:25px}.button{display:inline-flex;align-items:center;gap:28px;padding:15px 20px;font-size:12px;font-weight:500;border-radius:4px}.primary{background:var(--teal);color:white;transition:background .2s,transform .2s}.primary:hover{background:#173f34;transform:translateY(-2px)}.text-link{font-size:12px;border-bottom:1px solid #a1ab9a;padding:9px 0}.text-link span{margin-left:10px}.location{font-family:var(--mono);font-size:9px;letter-spacing:.2px;color:var(--muted);margin-top:34px}.location>span:first-child{font-size:18px;vertical-align:-2px;margin-right:6px}.divider{padding:0 12px}.board{aspect-ratio:1.05;position:relative;border:1px solid #c8d1bc;border-radius:12px;background-color:#e9edde;background-image:radial-gradient(#97ad893f .8px,transparent .8px);background-size:15px 15px;box-shadow:0 15px 45px #394c2d06;overflow:hidden;min-height:400px}.board-meta,.board-footer{position:absolute;left:23px;right:23px;display:flex;justify-content:space-between;font:8px var(--mono);letter-spacing:1px}.board-meta{top:22px}.board-rev{border:1px solid #bfcbb5;padding:3px 5px;margin-top:-3px}.board-footer{bottom:21px}.board-footer .status-dot{width:5px;height:5px}.traces{position:absolute;width:100%;height:100%;color:#a4b99a;inset:0}.board-label{position:absolute;font:7px var(--mono);letter-spacing:1px;transform:rotate(-90deg);transform-origin:left top}.label-a{top:58%;left:25px}.label-b{top:65%;left:calc(100% - 24px);transform:rotate(90deg);transform-origin:left top}.cpu{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:53%;height:43%;border:9px solid #b4c1a4;border-radius:10px;background:#234c40;box-shadow:0 0 0 1px #718767,0 8px 0 #8c9e7d,0 18px 25px #1f432225;padding:10px}.cpu:before,.cpu:after{content:'';position:absolute;left:-18px;top:13px;bottom:13px;width:8px;background:repeating-linear-gradient(to bottom,#819874 0 4px,transparent 4px 12px)}.cpu:after{left:auto;right:-18px}.cpu-inner{border:1px solid #75987a66;border-radius:4px;height:100%;padding:15px;display:flex;flex-direction:column;justify-content:space-between;color:#eff2dc}.cpu-top{font:8px var(--mono);letter-spacing:2px;color:#bfd0af}.cpu-title{font-family:var(--display);font-size:clamp(22px,2.5vw,34px);letter-spacing:-1px;line-height:1.15}.cpu-title>span{color:#cadba6}.cpu-bottom{font:5px var(--mono);letter-spacing:.5px;color:#bdcda9}.pipeline{position:absolute;top:72%;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:6px;font:7px var(--mono)}.pipeline span{padding:7px;border:1px solid #c0cbb2;border-radius:3px;transition:background .2s}.pipeline i{font-style:normal;color:#6d855e}.pipeline span.active{background:#245d4d;color:#fff;border-color:#245d4d}.cycle-button{position:absolute;top:82%;left:50%;transform:translateX(-50%);background:none;border:0;border-bottom:1px solid #9dad8f;padding:4px 0;color:var(--ink);font:9px var(--mono);white-space:nowrap}.cycle-button span{margin-left:12px}.signal-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.signal-strip>div{display:flex;justify-content:space-between;gap:20px;padding-top:20px;padding-bottom:20px;font:9px var(--mono);letter-spacing:1px}.signal-strip>div>span:first-child{color:var(--muted);font-size:8px}.signal-strip i{color:var(--orange);padding:0 15px;font-style:normal}.content-section{padding-top:83px;padding-bottom:68px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:30px;gap:20px}h2{font-family:var(--display);font-size:36px;letter-spacing:-1.5px;font-weight:500;margin:12px 0 0;line-height:1.2}.section-heading>p{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 3px}.filters{display:flex;gap:9px;flex-wrap:wrap;margin:32px 0 25px}.filters button{padding:9px 14px;border:1px solid var(--line);border-radius:4px;background:none;color:var(--muted);font-size:11px}.filters button.selected{background:var(--ink);color:#fff;border-color:var(--ink)}.filters button span{margin-left:10px;opacity:.6}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.project-card{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#faf9f3;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}.project-card:hover{transform:translateY(-4px);box-shadow:0 9px 20px #233e3509}.project-art{height:174px;background:#e8edde;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);color:#426247}.art-label{position:absolute;left:17px;top:15px;font:8px var(--mono);letter-spacing:1px}.art-number{position:absolute;right:15px;bottom:13px;font:8px var(--mono);opacity:.6}.project-art svg{width:85%;height:110px}.project-art.coral{background:#f0e6dc;color:#a2684e}.project-art.blue{background:#e1e9e6;color:#4d7978}.project-art.lilac{background:#e8e6eb;color:#77708b}.project-content{padding:21px;flex:1;display:flex;flex-direction:column}.project-type{font:8px var(--mono);letter-spacing:1px;color:var(--muted)}h3{font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:-.6px;margin:10px 0}.project-content>p{color:var(--muted);font-size:12px;line-height:1.75;margin:0 0 18px}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}.tags span{border:1px solid var(--line);padding:4px 6px;border-radius:3px;font:8px var(--mono);color:#61715e}.project-open{display:flex;justify-content:space-between;align-items:center;background:none;color:var(--ink);border:0;border-top:1px solid var(--line);width:100%;padding:14px 0 0;margin-top:20px;font-size:11px;text-align:left}.project-open span{font-size:17px}.project-note{text-align:center;font:10px var(--mono);color:var(--muted);line-height:1.9;margin:27px 0 0}.project-note a{color:var(--teal);border-bottom:1px solid #b5c2ac;white-space:nowrap}.work-section{background:#eceedf80;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.experience-list{margin-top:40px}.experience-list details{border-top:1px solid #cdd5c4}.experience-list details:last-child{border-bottom:1px solid #cdd5c4}.experience-list summary{display:grid;grid-template-columns:145px 1fr 195px 20px;gap:20px;align-items:center;padding:25px 0;cursor:pointer;list-style:none}.experience-list summary::-webkit-details-marker{display:none}.exp-date{font:9px var(--mono);color:var(--muted);line-height:1.8}.exp-name strong{display:block;font-size:16px;font-weight:500;letter-spacing:-.3px}.exp-name small{display:block;font-size:11px;color:var(--muted);margin-top:7px}.exp-category{justify-self:start;font:8px var(--mono);letter-spacing:.4px;border:1px solid #cbd4c1;padding:6px 9px;border-radius:3px}.exp-toggle{font-size:22px;font-weight:400}.experience-list details[open] .exp-toggle{transform:rotate(45deg)}.exp-detail{margin:0 50px 25px 165px;font-size:13px;color:var(--muted);line-height:1.85;max-width:700px}.exp-detail li{margin-bottom:6px}.education{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:38px;padding-bottom:38px;border-bottom:1px solid var(--line)}.education h3{font-size:22px}.education p:not(.eyebrow){color:var(--muted);font-size:12px}.education-stats{display:flex;gap:45px}.education-stats strong{display:block;font-family:var(--display);font-size:27px;font-weight:500}.education-stats span{display:block;font:8px var(--mono);margin-top:9px;color:var(--muted)}.off-clock{display:grid;grid-template-columns:1.05fr 1fr .65fr;gap:30px;align-items:center}.off-clock h2{font-size:31px}.off-intro{font-size:13px;line-height:1.8;color:var(--muted);max-width:265px}.hobby-card{border:1px solid var(--line);border-radius:6px;background:#eeefe2;padding:25px}.hobby-card h3{font-size:19px}.hobby-card>p:not(.eyebrow){font-size:12px;line-height:1.8;color:var(--muted)}.small-tag{font:8px var(--mono);letter-spacing:1px}.robot{width:57px;height:76px;position:relative;margin:5px 0 19px 10px;transform:rotate(-7deg)}.antenna{position:absolute;height:12px;width:2px;background:#698159;top:0;left:25px}.antenna:before{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:var(--orange);left:-2px;top:-3px}.robot-head{position:absolute;top:11px;width:53px;height:31px;border:2px solid #698159;border-radius:5px;display:flex;gap:13px;padding:8px 11px}.robot-head i{background:var(--ink);width:5px;height:6px;border-radius:2px}.robot-head>span{position:absolute;bottom:4px;left:21px;width:10px;height:2px;background:#698159}.robot-body{position:absolute;top:45px;left:6px;width:42px;height:28px;border:2px solid #698159;border-radius:4px;text-align:center;padding-top:6px;font:9px var(--mono)}.hobby-note{padding:10px 0 10px 15px}.note-star{font-size:44px;color:var(--orange)}.hobby-note h3{font-size:20px}.hobby-note p{font-size:12px;color:var(--muted);line-height:1.8}.mono{font:8px var(--mono);color:var(--muted)}.contact-section{background:#e4e9da;border-top:1px solid #d3dbc7;border-bottom:1px solid #d3dbc7;padding:58px 0}.contact-section h2{font-size:43px;max-width:820px;margin:18px 0 30px;position:relative}.contact-section h2>span{color:var(--orange);display:inline-block;margin-left:45px}.email{font:11px var(--mono);margin-left:24px}footer{display:flex;justify-content:space-between;align-items:center;padding-top:29px;padding-bottom:29px;gap:25px}footer .brand{font-size:9px;line-height:1.8;font-weight:400;letter-spacing:0}footer small{color:var(--muted);font-size:8px}footer>div{display:flex;gap:24px;font-size:11px}.skip{position:fixed;left:15px;top:-80px;z-index:5;padding:12px;background:var(--ink);color:#fff}.skip:focus{top:10px}dialog{border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);width:min(650px,90vw);padding:42px;max-height:85vh;box-shadow:0 25px 80px #122b3340}dialog::backdrop{background:#17392ed0;backdrop-filter:blur(4px)}.close-dialog{position:absolute;right:15px;top:13px;background:none;border:0;color:var(--ink);font-size:20px;padding:8px}dialog h2{font-size:30px;margin-bottom:20px}dialog li{font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:14px}dialog ul{padding-left:20px}dialog .tags{margin-top:24px}.dialog-date{font:10px var(--mono);color:var(--muted)}body.modal-open{overflow:hidden}
@media(min-width:1450px){.hero{padding-top:95px;padding-bottom:90px}.board{min-height:480px}}
@media(max-width:1000px){.header{padding:22px 28px}.section-wrap{padding-left:28px;padding-right:28px}.hero{gap:25px}.hero h1{font-size:48px}.hero-line{font-size:29px}.board{min-height:370px}.cpu-inner{padding:10px}.cpu-bottom{font-size:4px}.hero-actions{gap:17px}.project-grid{gap:14px}.project-content{padding:17px}.signal-strip>div>span:first-child{display:none}.signal-strip>div{justify-content:center}.off-clock{grid-template-columns:1fr 1fr}.hobby-note{grid-column:1/-1;display:flex;align-items:center;gap:25px;padding:0}.experience-list summary{grid-template-columns:125px 1fr 150px 20px}.exp-detail{margin-left:145px}.education-stats{gap:20px}}
@media(max-width:700px){.header{flex-wrap:wrap;gap:15px;padding:18px 22px}.header>.brand{font-size:10px}.brand-chip{width:35px;height:35px;font-size:22px}.contact-nav{font-size:11px}nav{order:3;width:100%;justify-content:center;gap:32px;border-top:1px solid var(--line);padding-top:16px;font-size:12px}.section-wrap{padding-left:22px;padding-right:22px}.hero{grid-template-columns:1fr;padding-top:40px;padding-bottom:38px;gap:35px}.hero h1{font-size:54px;margin-top:22px}.hero-line{font-size:30px}.hero .eyebrow{font-size:8px}.intro{font-size:14px}.location{font-size:8px}.board{width:100%;min-height:340px;max-width:490px;justify-self:center}.cpu-title{font-size:30px}.cpu-bottom{font-size:5px}.cpu-inner{padding:13px}.signal-strip>div{font-size:7px;letter-spacing:0;line-height:1.9;padding-top:16px;padding-bottom:16px}.signal-strip i{padding:0 6px}.content-section{padding-top:51px;padding-bottom:45px}.section-heading{align-items:flex-start;flex-direction:column;gap:14px}.section-heading>p br{display:none}h2{font-size:29px}.filters{gap:6px;margin-top:25px}.filters button{font-size:10px;padding:8px 10px}.project-grid{grid-template-columns:1fr 1fr;gap:12px}.project-art{height:140px}.project-art svg{height:95px;width:94%}.art-label{font-size:6px;left:10px}.project-content{padding:14px}.project-content h3{font-size:18px}.project-content>p{font-size:11px}.tags span{font-size:7px}.experience-list summary{grid-template-columns:1fr 20px;gap:8px;padding:23px 0}.exp-date{grid-column:1}.exp-name{grid-column:1;grid-row:2}.exp-name strong{font-size:15px}.exp-category{grid-column:1;grid-row:3;margin-top:4px}.exp-toggle{grid-column:2;grid-row:2}.exp-detail{margin:0 0 22px;padding-left:18px}.education{align-items:flex-start;flex-direction:column;gap:18px}.education-stats{gap:45px}.off-clock{grid-template-columns:1fr}.off-intro{max-width:100%}.hobby-note{display:block;grid-column:auto;padding:15px 0}.hobby-note .note-star{float:left;margin:5px 23px 35px 0}.contact-section{padding:40px 0}.contact-section h2{font-size:32px}.contact-section h2>span{margin-left:15px}.email{font-size:9px;display:block;margin:22px 0 0}footer{align-items:flex-start;flex-direction:column}footer>div{gap:25px}dialog{padding:37px 24px}dialog h2{font-size:25px}}
@media(max-width:390px){.project-grid{grid-template-columns:1fr}.hero h1{font-size:47px}.hero-actions{gap:15px}.button{padding:14px 16px;gap:18px}.text-link{font-size:11px}.board{min-height:320px}.cpu-title{font-size:25px}.cpu-bottom{font-size:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Expanded portfolio content: shared by both color themes. */
.project-skills { margin-top: auto; }
.project-skills-label { display: block; font: 9px var(--mono); letter-spacing: 1px; color: var(--muted); margin-bottom: 9px; }
.detail-overview { font-size: 14px; line-height: 1.85; color: var(--muted); margin: 18px 0 24px; }
.contributions-heading { font: 500 17px var(--display); margin: 24px 0 14px; letter-spacing: -.3px; }
.skills-section { border-top: 1px solid var(--line); margin-top: 25px; padding-top: 18px; }
.skills-section .skills-heading { font: 500 17px var(--display); letter-spacing: -.3px; margin: 0 0 17px; }
.skill-group + .skill-group { margin-top: 17px; }
.skill-group h4 { font: 500 10px var(--mono); letter-spacing: .4px; color: var(--muted); margin: 0 0 9px; }
.skill-list, dialog .skill-list { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 0; }
.skill-list li, dialog .skill-list li { font: 10px/1.5 var(--mono); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; margin: 0; overflow-wrap: anywhere; }
.exp-detail-content { margin: 0 50px 28px 165px; max-width: 700px; }
.exp-detail-content .exp-detail { margin: 0; padding-left: 19px; }
.exp-detail-content .detail-overview { margin-top: 0; }
@media(max-width:1000px) { .exp-detail-content { margin-left: 145px; } }
@media(max-width:700px) { .exp-detail-content { margin: 0 0 25px; } .skill-list li, dialog .skill-list li { font-size: 10px; } }

.hobbies-expanded { grid-template-columns: 1fr; align-items: start; }
.hobbies-expanded .off-intro { max-width: 550px; }
.hobby-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hobby-grid .hobby-card { display: flex; flex-direction: column; }
.hobby-grid .skill-list { margin-top: auto; padding-top: 12px; }
.project-skills .tags { gap: 7px; }
@media(max-width:700px) { .hobby-grid { grid-template-columns: 1fr; }   }

/* Keep expanded content readable and visible at every breakpoint. */
.project-content > .project-context { border-top: 1px solid var(--line); padding-top: 14px; }
.project-content .tags span { font-size: 10px; line-height: 1.5; padding: 5px 7px; }
.skills-section .skill-list li { background: #6d8b6a12; }
.about-intro { padding-top: 55px; padding-bottom: 35px; }
.about-lead { font-size: 19px; line-height: 1.8; max-width: 780px; }
.about-secondary { font-size: 15px; line-height: 1.9; color: var(--muted); max-width: 760px; margin: 20px 0; }
@media(max-width:700px) { .about-lead { font-size: 17px; } .about-secondary { font-size: 14px; } }