@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
:root{--bg:#f4f5f7;--panel:#fff;--text:#1f2a3b;--muted:#596577;--line:#d5dbe3;--accent:#64778b;--orange:#2d4563;--blue:#6d7d91}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.75 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #577caa;outline-offset:6px}::selection{background:#cad7e7;color:#162033}.skip{position:fixed;top:-80px;background:#20334e;color:white;z-index:40;padding:15px}.skip:focus{top:0}.scroll-progress{position:fixed;left:0;top:0;width:100%;height:2px;background:#6884a4;transform:scaleX(0);transform-origin:left;z-index:30}header{height:86px;padding:0 5%;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#f4f5f7f5;backdrop-filter:blur(12px);z-index:20}.logo{font:700 33px 'Manrope',sans-serif;letter-spacing:-4px;margin-right:auto}.logo span{color:#64778b}nav{display:flex;gap:32px;font-size:14px}nav a:hover,.text-link:hover{color:#536c8b}.resume{font-size:14px;border:1px solid #aeb9c8;padding:8px 17px;border-radius:4px}.hero{padding:26px 5% 0;position:relative;overflow:hidden;isolation:isolate}.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.25;pointer-events:none}.hero-top{display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:1.2px;color:var(--muted)}.availability:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#658773;margin-right:10px}.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:12%;align-items:center;padding:52px 0 55px}.intro,.kicker{font-size:12px;letter-spacing:1.7px;font-weight:600}.intro{color:#576d88;margin:0 0 22px}h1,h2,h3{font-family:'Manrope',sans-serif}h1,h2,h3,p{margin-top:0}h1,h2{letter-spacing:-.055em;font-weight:500}h1{font-size:clamp(70px,7.1vw,110px);line-height:1;margin-bottom:27px}em{font-style:normal;color:var(--accent)}.hero-statement{font-size:clamp(19px,1.75vw,25px);line-height:1.5;font-weight:500;letter-spacing:-.55px;margin-bottom:18px}.hero-description{max-width:470px;font-size:16px;color:var(--muted);line-height:1.8;margin-bottom:27px}.hero-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;gap:35px;padding:14px 21px;background:#253951;color:#fff;border-radius:4px;font-weight:500;font-size:14px;transition:background .2s,transform .2s}.button:hover{background:#425e7e;transform:translateY(-2px)}.button span{font-size:23px;line-height:1}.text-link{font-size:14px;text-decoration:underline;text-underline-offset:6px}.identity{position:relative;perspective:1200px;max-width:390px;justify-self:end;width:100%;padding-top:12px}.portrait-wrap{position:relative;transform:rotate(0deg);border-radius:8px;overflow:hidden;background:#e0e3e8;box-shadow:16px 16px 0 #e0e5ec;will-change:transform;transition:transform .4s ease-out}.portrait{display:block;width:100%;height:auto;aspect-ratio:1/1.17;object-fit:cover;object-position:center;filter:grayscale(.2) saturate(.75)}.portrait-label{position:absolute;bottom:0;left:0;right:0;background:#213047;color:#f4f5f7;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:1.3px}.portrait-label>span:last-child{font:500 23px 'Manrope';letter-spacing:-1px}.identity-note{padding:31px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}.hero-bottom{border-top:1px solid var(--line);padding:21px 0;display:flex;justify-content:space-between;color:var(--muted);font-size:12px;letter-spacing:1px;gap:20px}.hero-bottom a{color:#314b6c}.at-a-glance{background:#fff;border-block:1px solid var(--line);padding:38px 5%;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.at-a-glance>div+div{border-left:1px solid var(--line);padding-left:35px}.glance-number{font-size:12px;color:#627389;letter-spacing:1px}.at-a-glance h2{font-size:19px;letter-spacing:-.5px;line-height:1.45;margin:12px 0 8px}.at-a-glance p{font-size:14px;line-height:1.7;color:var(--muted);margin:0;max-width:360px}.section{padding:88px 5%;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:40px}.kicker{color:var(--muted);margin-bottom:24px}h2{font-size:clamp(38px,4vw,60px);line-height:1.13;margin-bottom:0}.section-heading>p{color:var(--muted);font-size:15px;max-width:365px;margin-bottom:4px}.projects{display:grid;grid-template-columns:1fr 1fr;gap:22px}.project{background:var(--panel);border:1px solid var(--line);border-radius:7px;display:flex;flex-direction:column;transition:border-color .25s,box-shadow .25s;position:relative;overflow:hidden}.project:hover{border-color:#91a2b8;box-shadow:0 8px 25px #20314908}.project:nth-child(-n+2){border-top:3px solid #6a829e}.project-body{padding:30px;display:flex;flex-direction:column;height:100%}.project-top{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:25px;font-size:12px;letter-spacing:.7px;color:var(--muted)}.project-top b{color:#597492;font-weight:500}.project h3{font-size:29px;font-weight:500;letter-spacing:-1.1px;line-height:1.25;margin-bottom:16px}.project p{color:var(--muted);max-width:590px;line-height:1.75}.project-brief{font-size:16px;margin-bottom:21px}.project-role{font-size:14px;color:#354861;margin:0 0 17px}.project-role strong{font-weight:500;color:#253a56}.project .project-role{color:#4b5e78}.project-flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;border-block:1px solid #e3e7ed;padding:14px 0;margin:0 0 24px}.project-flow span{font-size:12px;color:#526d8c}.project-flow i{font-style:normal;color:#9aa7b7;font-size:13px}.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}.tags span{background:#f0f3f7;padding:4px 9px;border-radius:3px;color:#50637a;font-size:12px}.project details{margin-top:22px;border-top:1px solid var(--line);padding-top:15px}.project summary{cursor:pointer;font-size:14px;display:flex;justify-content:space-between;list-style:none}.project summary::-webkit-details-marker{display:none}.project summary:after{content:'+';color:#536c89;font-size:20px}.project details[open] summary:after{content:'−'}.detail{padding-top:22px}.detail h4{font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:600;margin:0 0 7px;color:#596f89}.detail p{font-size:14px;margin-bottom:19px}.detail a{font-size:14px;color:#304f76;text-decoration:underline;text-underline-offset:5px}.story{background:#213047;color:#f1f3f6;--line:#445269;--muted:#bdc7d5;--accent:#a2b8d1}.journey{display:flex;align-items:center;font:500 clamp(23px,2.7vw,38px) 'Manrope';letter-spacing:-1px;margin:20px 0 50px}.journey i{flex:1;height:1px;background:#53637b;margin:0 30px;position:relative}.journey i:after{content:'→';position:absolute;right:0;top:-18px;color:#a7b9d0;font-size:22px;background:#213047;padding-left:12px}.story-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:12%}.story-intro h3{font-size:27px;font-weight:500;line-height:1.4;letter-spacing:-1px}.story-intro p{color:var(--muted)}.timeline article{padding:0 0 30px 25px;border-left:1px solid var(--line);position:relative}.timeline article:before{content:'';position:absolute;left:-4px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)}.timeline article>span{font-size:12px;letter-spacing:1px;color:var(--muted)}.timeline h3{font-size:21px;font-weight:500;line-height:1.3;margin:12px 0 5px}.timeline h4{font-size:14px;font-weight:500;color:var(--accent);margin:0 0 14px}.timeline p{font-size:15px;color:var(--muted);margin-bottom:5px}.foundation{display:grid;grid-template-columns:1.2fr 1fr;gap:10%;background:#fff}.foundation h2{font-size:clamp(38px,4vw,55px)}.education{margin-top:38px;border-left:2px solid #7991ad;padding-left:22px}.education p{font-size:14px;color:var(--muted);margin:12px 0}.education h3{font-size:25px;font-weight:500;margin-bottom:0}.education span{color:#536b87}.coursework{margin-top:20px;max-width:500px}.coursework summary{font-size:14px;cursor:pointer}.leadership{font-size:14px;color:var(--muted);margin-top:30px}.leadership span{font-size:12px;margin-left:15px}.skills>div{border-bottom:1px solid var(--line);padding:20px 0}.skills>div:first-child{padding-top:0}.skills h3{font-size:17px;font-weight:600;margin-bottom:8px}.skills p{color:var(--muted);margin-bottom:0;font-size:15px}.research-note{padding-top:32px;padding-bottom:32px;display:grid;grid-template-columns:.8fr 1.7fr .5fr;gap:30px;align-items:start;background:#eef1f5}.research-note .kicker{margin:5px 0 0}.research-note h3{font-size:20px;font-weight:500;letter-spacing:-.5px;margin-bottom:10px}.research-note p:not(.kicker){color:var(--muted);font-size:14px;max-width:700px;margin:0}.research-status{color:var(--muted);font-size:12px;justify-self:end;white-space:nowrap}.contact{background:#e3e9f0}.contact .kicker{color:#4c627e}.contact h2{font-size:clamp(43px,5.4vw,80px);max-width:1100px;line-height:1.07}.contact em{color:#677e99}.contact-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:35px;gap:30px}.contact-bottom p{color:var(--muted);margin:0;font-size:16px}.email{display:inline-block;margin-top:24px;font-size:18px;border-bottom:1px solid #95a8be}footer{padding:25px 5%;display:flex;gap:30px;justify-content:space-between;font-size:12px;color:var(--muted)}footer>span:nth-child(2){letter-spacing:.5px}.reveal{opacity:0;transform:translateY(14px);transition:opacity .65s,transform .65s}.reveal.visible{opacity:1;transform:none}.motion-paused .reveal{opacity:1;transform:none}.motion-paused .portrait-wrap{transform:none!important}@media(min-width:1650px){header,main,footer{max-width:1650px;margin-left:auto;margin-right:auto}}@media(max-width:1000px){header{gap:20px}nav{gap:20px}.hero-grid{gap:8%;padding:45px 0}.hero h1{font-size:8.8vw}.section-heading{align-items:start;flex-direction:column;gap:23px}.project-body{padding:25px}.project h3{font-size:27px}.research-note{grid-template-columns:1fr 2fr}.research-status{display:none}.hero-actions{gap:18px}.section{padding-top:70px;padding-bottom:70px}.research-note{padding-top:30px;padding-bottom:30px}.hero-bottom{letter-spacing:0}.at-a-glance{gap:23px}.at-a-glance>div+div{padding-left:23px}}@media(max-width:700px){header{height:76px;gap:13px;padding:0 6%}.logo{font-size:30px}nav a:nth-child(2){display:none}nav{gap:14px}.resume{padding:7px 10px;font-size:12px}nav a{font-size:12px}.hero{padding:22px 6% 0}.hero-top{font-size:12px;letter-spacing:.3px}.hero-top>span:last-child{display:none}.hero-grid{grid-template-columns:1fr;padding:36px 0;gap:30px}.hero h1{font-size:clamp(65px,15vw,95px)}.hero-description{max-width:430px}.hero-statement{font-size:20px}.identity{width:80%;max-width:330px;justify-self:center;margin-right:10px}.portrait{aspect-ratio:1/1.04}.identity-note{padding-top:28px}.hero-bottom{flex-wrap:wrap;font-size:12px;gap:12px}.hero-bottom>a{width:100%}.at-a-glance{grid-template-columns:1fr;padding:15px 6%;gap:0}.at-a-glance>div{padding:23px 0;display:grid;grid-template-columns:26px 1fr;column-gap:15px}.at-a-glance>div+div{border-left:0;border-top:1px solid var(--line);padding:23px 0}.glance-number{grid-row:1/3;padding-top:4px}.at-a-glance h2{margin:0 0 6px;font-size:18px}.at-a-glance p{grid-column:2}.section{padding:55px 6%}.projects{grid-template-columns:1fr}.project-body{padding:25px}.project h3{font-size:27px}.story-grid,.foundation{grid-template-columns:1fr;gap:30px}.journey{margin-bottom:35px}.journey i{margin:0 15px}.research-note{display:block;padding-top:28px;padding-bottom:28px}.research-note .kicker{margin-bottom:18px}.contact-bottom{align-items:start;flex-direction:column}.contact-bottom br{display:none}.contact h2{font-size:clamp(39px,8.6vw,61px)}.email{font-size:16px;overflow-wrap:anywhere}footer{flex-wrap:wrap;padding:25px 6%;gap:18px}footer>span:first-child{width:100%}footer>span:nth-child(2){display:none}.section-heading{margin-bottom:30px}.hero-actions .button{gap:25px}.intro{letter-spacing:.6px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.repository-link{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#395b81;margin-top:17px;padding-top:15px;border-top:1px solid #e4e8ee}.repository-link:hover{color:#142b49;text-decoration:underline;text-underline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.featured-project{grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr;background:#fff}.featured-preview{display:flex;flex-direction:column;justify-content:center;padding:30px;background:#e8edf2;border-right:1px solid var(--line);overflow:hidden}.preview-browser{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;padding:11px 15px;border:1px solid #d0d8e2;border-bottom:0;border-radius:7px 7px 0 0;font-size:12px;color:#52677f}.preview-browser>span:first-child{color:#b0bdce;font-size:9px;letter-spacing:2px}.featured-preview img{display:block;width:100%;height:auto;border:1px solid #d0d8e2;border-radius:0 0 5px 5px;transition:transform .45s}.featured-preview:hover img{transform:translateY(-3px)}.featured-project .project-body{padding:34px}.project:nth-child(3){border-top:3px solid #6a829e}@media(max-width:900px){.featured-project{grid-template-columns:1fr}.featured-preview{border-right:0;border-bottom:1px solid var(--line);padding:25px;max-height:460px}.featured-preview img{object-fit:cover;object-position:top;min-height:0}.featured-project .project-body{padding:25px}}@media(max-width:700px){header{gap:22px}nav{gap:20px}.featured-preview{padding:18px}.hero-top{font-size:12px}}

.nav-count{font-size:12px;color:#536b87;margin-left:4px}.live-label{font:500 12px/1.4 "DM Sans",sans-serif;letter-spacing:0;display:inline-block;vertical-align:middle;background:#edf3ee;color:#3a6448;padding:5px 9px;border-radius:4px;margin-left:8px}
.repository-preview{margin:0;background:#e8edf2;border-bottom:1px solid var(--line);overflow:hidden}.repository-preview img{display:block;width:100%;height:auto;aspect-ratio:1.8;object-fit:cover;object-position:top;transition:transform .5s}.project:hover .repository-preview img{transform:scale(1.015)}.repository-preview figcaption{font-size:12px;padding:10px 24px;color:#50647e;border-top:1px solid #d5dbe3}.cloud-project .project-flow{padding:25px 0}.cloud-project .project-flow span{font-size:14px}.project-body{flex:1;height:auto}header a,.repository-link,.project summary{min-height:24px}.project summary{align-items:center}nav a{display:inline-flex;align-items:center}@media(max-width:700px){.project summary,.repository-link{min-height:44px}.repository-preview img{aspect-ratio:1.6}}

/* Spacing and typography system: consistent rhythm across every section. */
:root {
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --section-space: clamp(3.5rem, 6.2vw, 6rem);
}
body { line-height: 1.7; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.section { padding-block: var(--section-space); }
.section-heading { gap: var(--space-4); margin-bottom: 2.5rem; }
.section-heading > div, .section-heading > p,
.hero-copy, .identity, .story-intro, .timeline, .skills { min-width: 0; }
.section-heading > p { font-size: 1rem; line-height: 1.75; max-width: 24rem; }
h2 { font-size: clamp(2.25rem, 4vw, 3.75rem); line-height: 1.16; letter-spacing: -.045em; }
.hero-grid { gap: 8%; padding-block: 3.5rem; }
h1 { line-height: 1.06; letter-spacing: -.055em; }
.hero-statement { line-height: 1.5; margin-bottom: 1rem; }
.hero-description { margin-bottom: 1.75rem; }
.hero-actions { gap: 1rem 1.5rem; }
.hero-actions > a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.hero-bottom { align-items: center; padding-block: 1.5rem; }
.at-a-glance { gap: 2rem; padding-block: 2.5rem; }
.at-a-glance > div + div { padding-left: 2rem; }
.at-a-glance h2 { font-size: 1.1875rem; min-height: 2.9em; margin-block: .75rem .5rem; }
.at-a-glance p { font-size: .9375rem; line-height: 1.75; }
.projects { gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project { min-width: 0; border-top: 1px solid var(--line); }
.project:nth-child(-n+3) { border-top: 1px solid var(--line); }
.featured-project { border-top: 3px solid #6a829e !important; }
.project-body, .featured-project .project-body { padding: 2rem; }
.project-top { align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; line-height: 1.5; }
.project-top b { flex-shrink: 0; }
.project-top > span { text-align: right; }
.project h3 { font-size: clamp(1.5rem, 2.15vw, 1.875rem); line-height: 1.3; letter-spacing: -.035em; margin-bottom: 1rem; }
.project p { font-size: 1rem; line-height: 1.75; }
.project .project-role { font-size: .875rem; margin-bottom: 1rem; }
.project-brief { margin-bottom: 1.25rem; }
.project-flow { gap: .5rem; padding-block: 1rem; margin-bottom: 1.5rem; }
.tags { gap: .5rem; padding-top: .25rem; }
.tags span { line-height: 1.6; padding: .25rem .625rem; }
.project details { margin-top: 1.5rem; padding-top: 0; }
.project summary { min-height: 3rem; padding-block: .75rem; gap: 1rem; line-height: 1.5; }
.project summary:after { flex-shrink: 0; }
.detail { padding-top: .5rem; }
.detail p { font-size: .9375rem; margin-bottom: 1.25rem; }
.detail h4 { margin-bottom: .5rem; }
.repository-link { margin-top: 0; padding-block: 1rem 0; min-height: 3rem; gap: 1rem; line-height: 1.5; }
.repository-preview figcaption { padding: .75rem 2rem; line-height: 1.6; }
.cloud-project { grid-column: 1 / -1; }
.cloud-project .project-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: 'meta meta' 'title flow' 'brief flow' 'role tags' 'details details' 'link link';
  column-gap: 3rem;
}
.cloud-project .project-top { grid-area: meta; }
.cloud-project h3 { grid-area: title; }
.cloud-project .project-brief { grid-area: brief; max-width: 38rem; }
.cloud-project .project-role { grid-area: role; margin-bottom: 0; }
.cloud-project .project-flow { grid-area: flow; align-self: center; justify-content: center; padding-block: 2rem; margin-bottom: 1rem; }
.cloud-project .tags { grid-area: tags; margin-top: 0; align-content: center; justify-content: center; }
.cloud-project details { grid-area: details; }
.cloud-project .repository-link { grid-area: link; }
.cloud-project .detail { columns: 2; column-gap: 3rem; }
.cloud-project .detail h4 { break-after: avoid; }
.cloud-project .detail p { break-inside: avoid; }
.journey { margin-block: 1.5rem 3rem; }
.story-grid { gap: 8%; }
.story-intro { max-width: 31rem; }
.story-intro p { margin-bottom: 1.5rem; }
.timeline article { padding: 0 0 2rem 1.75rem; }
.timeline article:last-child { padding-bottom: 0; }
.timeline p, .skills p { font-size: 1rem; line-height: 1.75; }
.timeline h3 { margin-top: .75rem; margin-bottom: .5rem; }
.timeline h4 { margin-bottom: .75rem; }
.foundation { gap: 8%; }
.education { margin-top: 2.5rem; padding-left: 1.5rem; }
.education p { line-height: 1.75; }
.coursework summary { padding-block: .5rem; }
.leadership { line-height: 1.8; }
.leadership span { display: block; margin-left: 0; margin-top: .25rem; }
.skills > div { padding-block: 1.5rem; }
.skills > div:last-child { border-bottom: 0; padding-bottom: 0; }
.research-note { padding-block: 2.25rem; gap: 2rem; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr) auto; }
.research-note h3 { line-height: 1.4; }
.research-note p:not(.kicker) { font-size: .9375rem; line-height: 1.75; }
.contact h2 { max-width: 15ch; line-height: 1.14; letter-spacing: -.045em; }
.contact-bottom { margin-top: 2.5rem; align-items: center; }
.contact-bottom p { max-width: 37rem; }
footer { align-items: center; gap: 1.5rem; padding-block: 1.75rem; }
footer a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 1000px) {
  .section-heading > p { max-width: 38rem; }
  .at-a-glance h2 { min-height: 4.35em; }
  .research-note { grid-template-columns: 1fr 2fr; }
  .cloud-project .project-body { column-gap: 2rem; }
  .project-body, .featured-project .project-body { padding: 1.5rem; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 6rem; }
  header { gap: 1rem; }
  nav { gap: 1rem; }
  header a { min-height: 2.75rem; }
  .hero-grid { padding-block: 2.5rem; gap: 2rem; }
  .hero h1 { line-height: 1.08; }
  .hero-statement { font-size: 1.25rem; }
  .hero-description { font-size: 1rem; }
  .hero-bottom { gap: .75rem 1rem; }
  .identity { padding-top: 0; }
  .at-a-glance { padding-block: .5rem; gap: 0; }
  .at-a-glance > div, .at-a-glance > div + div { padding: 1.5rem 0; }
  .at-a-glance h2 { min-height: 0; margin-top: 0; }
  .section-heading { margin-bottom: 2rem; gap: 1.25rem; }
  .projects { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .project h3 { font-size: 1.625rem; text-wrap: pretty; }
  .project-top { font-size: .75rem; letter-spacing: .025em; }
  .project-body, .featured-project .project-body { padding: 1.5rem; }
  .repository-preview figcaption { padding-inline: 1.5rem; }
  .cloud-project .project-body { display: flex; }
  .cloud-project .project-flow { align-self: stretch; justify-content: flex-start; padding-block: 1.25rem; margin-block: 1.5rem; }
  .cloud-project .tags { justify-content: flex-start; }
  .cloud-project .detail { columns: auto; }
  .story-grid, .foundation { gap: 2.5rem; }
  .journey { margin-bottom: 2.5rem; }
  .journey i { margin-inline: 1rem; }
  .timeline article { padding-left: 1.5rem; }
  .research-note { display: block; }
  .research-note .kicker { margin-bottom: 1.25rem; }
  .contact h2 { font-size: clamp(2.25rem, 8.6vw, 3.5rem); max-width: 17ch; }
  .contact-bottom { align-items: flex-start; gap: 1.5rem; margin-top: 2rem; }
  .contact-bottom p { font-size: 1rem; }
  .email { font-size: 1rem; }
  footer { gap: .5rem 1.5rem; }
}
@media (max-width: 370px) {
  .project-body, .featured-project .project-body { padding: 1.25rem; }
  .project-top { flex-wrap: wrap; gap: .5rem; }
  .project-top > span { text-align: left; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .journey { font-size: 1.25rem; }
}
@media print {
  header, .hero canvas, .scroll-progress, .hero-bottom, .hero-actions, .featured-preview, .repository-preview { display: none !important; }
  body { background: white; color: #111; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .section { padding-block: 1.5rem; }
  .story, .contact { background: white; color: #111; --muted: #333; --accent: #333; --line: #aaa; }
  .projects { display: block; }
  .project { break-inside: avoid; margin-bottom: 1rem; }
  .cloud-project .project-body { display: flex; }
}

/* Personal direction: an editorial identity shaped by software and operations. */
.hero {
  --text: #f0f2f5;
  --muted: #bcc8d8;
  --line: #43516a;
  --accent: #bacadd;
  color: var(--text);
  background: #1c2b41;
  padding-top: 1.5rem;
}
.hero canvas { opacity: .5; }
.hero-top { color: #c1cddd; }
.availability:before { background: #c4ddbf; }
.nameplate {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 2rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.nameplate h1 {
  font-size: clamp(3.5rem, 7.8vw, 7.75rem);
  letter-spacing: -.065em;
  line-height: 1.08;
  margin: 0;
  white-space: nowrap;
}
.nameplate h1 em { color: #c2cedd; }
.native-name {
  font-family: Tahoma, sans-serif;
  font-size: 1.125rem;
  color: #c1cddd;
  white-space: nowrap;
  padding-bottom: .6rem;
}
.hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 8%; padding-block: 2.5rem; }
.hero .intro { color: #c3d0e1; letter-spacing: .09em; margin-bottom: 1.25rem; }
.hero h2.hero-statement {
  font-size: clamp(2rem, 3.1vw, 3rem);
  line-height: 1.2;
  letter-spacing: -.035em;
  font-weight: 500;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.hero-statement em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; color: #e5c8a7; letter-spacing: -.03em; }
.hero-description { max-width: 32rem; color: #c4cfde; font-size: 1rem; margin-bottom: .875rem; }
.student-note { font-size: .8125rem; color: #bcc8d8; margin-bottom: 1.75rem; }
.hero .button { background: #e5c8a7; color: #1e2b3e; }
.hero .button:hover { background: #f1d8bb; }
.hero .text-link { color: #e7edf4; }
.hero .text-link:hover { color: #e5c8a7; }
.hero .identity { max-width: 340px; justify-self: end; padding-top: 0; margin-right: 14px; }
.hero .portrait-wrap { border-radius: 2px; box-shadow: 12px 12px 0 #32445e; }
.hero .portrait { aspect-ratio: 1; filter: grayscale(.65) saturate(.7); }
.hero .portrait-label { background: #16253b; padding: 12px 16px; }
.hero .portrait-label > span:first-child { font-size: .6875rem; letter-spacing: .06em; }
.identity-note { display: flex; justify-content: space-between; gap: 1rem; color: #c1cddd; padding-top: 1.5rem; }
.identity-coordinate { color: #c1cddd; font-size: .75rem; text-align: right; letter-spacing: .07em; }
.hero-bottom { padding-block: 1.25rem; color: #c1cddd; }
.hero-bottom a { color: #e5edf5; }
.hero-bottom > a:last-child { color: #e5c8a7; }
.career-route { display: inline-flex; gap: 1.5rem; align-items: center; }
.career-route span { font-size: 1rem; letter-spacing: -.02em; }
.career-route i { font-style: normal; color: #e5c8a7; }
.at-a-glance { border-top: 0; }
.glance-number { font-family: Georgia, serif; font-style: italic; font-size: 1.5rem; line-height: 1; color: #536b87; }
.project { border-radius: 2px; }
.project-top b { font-family: Georgia, serif; font-size: 1rem; font-style: italic; color: #4f6681; }
.featured-project { border-top: 3px solid #9b7652 !important; }
.featured-preview { background: #e5e9ed; }
.section-heading h2 em, .foundation h2 em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; letter-spacing: -.035em; }
.story .section-heading h2 em { color: #e5c8a7; }
.story .journey { padding-block: 1.5rem; border-block: 1px solid #53637b; }
.contact h2 { max-width: 18ch; }
.contact h2 em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; letter-spacing: -.035em; }
@media(max-width:1100px) {
  .native-name { font-size: .9375rem; }
  .nameplate h1 { font-size: 7.7vw; }
  .hero .identity { max-width: 300px; }
  .hero .intro { max-width: 31rem; line-height: 1.7; }
}
@media(max-width:700px) {
  .hero { padding-top: 1.25rem; }
  .nameplate { align-items: flex-start; padding-block: 1.5rem; gap: 1rem; }
  .nameplate h1 { font-size: clamp(2.75rem, 11vw, 4.5rem); white-space: normal; }
  .nameplate h1 em { display: block; }
  .native-name { writing-mode: vertical-rl; font-size: .875rem; padding: .5rem 0 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); padding-block: 2rem; gap: 2rem; }
  .hero h2.hero-statement { font-size: clamp(1.875rem, 7vw, 2.5rem); }
  .hero .intro { font-size: .75rem; letter-spacing: .04em; }
  .hero .identity { justify-self: center; width: 82%; max-width: 330px; margin-right: 12px; }
  .hero .portrait-label > span:first-child { font-size: .6875rem; }
  .hero-bottom { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  .career-route { justify-content: space-between; gap: .75rem; }
  .hero-bottom > a:last-child { padding-top: .75rem; border-top: 1px solid #43516a; }
  .identity-note { font-size: .8125rem; }
  .at-a-glance .glance-number { padding-top: .125rem; font-size: 1.25rem; }
  .story .journey { padding-block: 1.25rem; }
}
@media print {
  .hero { background: white; color: #111; --text: #111; --accent: #333; --muted: #333; }
  .hero h1 em, .hero h2 em, .hero .intro, .hero-description, .student-note, .native-name { color: #333; }
}
.nameplate h1 { letter-spacing: -.055em; }
.nameplate h1 em { margin-left: .06em; }
.hero .portrait-label > span:first-child { font-size: .75rem; }
@media(max-width:700px) { .nameplate h1 em { margin-left: 0; } }

.native-name{display:none!important}.demo-link{display:flex;justify-content:space-between;gap:1rem;padding:.875rem 1rem;border:1px solid #9fb0c4;background:#eef3f8;color:#233e60;font-size:.875rem;border-radius:3px;margin-bottom:.75rem;min-height:44px;align-items:center}.demo-link:hover{background:#dfe9f3}.project details+.demo-link{margin-top:1rem}

/* Phone layout: compact identity, readable cards, and comfortable touch targets. */
.mobile-portrait { display: none; }
@media (max-width: 700px) {
  html { scroll-padding-top: 80px; }
  header { height: 68px; padding-inline: 20px; gap: 12px; }
  header .logo { font-size: 29px; }
  header nav { gap: 14px; }
  header .resume { padding: 7px 9px; white-space: nowrap; }
  .hero { padding: 20px 20px 0; }
  .hero-top { font-size: 11px; }
  .nameplate { align-items: center; gap: 16px; padding-block: 22px; }
  .nameplate h1 { font-size: clamp(36px, 10.7vw, 64px); line-height: 1.06; letter-spacing: -.055em; }
  .mobile-portrait { display: block; flex: 0 0 auto; width: clamp(88px, 26vw, 140px); height: auto; aspect-ratio: .9; object-fit: cover; border-radius: 4px; box-shadow: 5px 5px 0 #32445e; filter: saturate(.65); }
  .hero .identity { display: none; }
  .hero-grid { padding-block: 24px; }
  .hero .intro { font-size: 10px; line-height: 1.65; letter-spacing: .06em; margin-bottom: 16px; max-width: 32ch; }
  .hero h2.hero-statement { font-size: clamp(27px, 7.2vw, 38px); line-height: 1.2; margin-bottom: 18px; text-wrap: initial; }
  .hero-description { font-size: 15px; line-height: 1.7; margin-bottom: 14px; }
  .student-note { font-size: 12px; line-height: 1.6; margin-bottom: 22px; max-width: 36ch; }
  .hero-actions { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
  .hero-actions .button { justify-content: space-between; padding: 13px 14px; gap: 12px; font-size: 13px; }
  .hero-actions .text-link { font-size: 12px; text-underline-offset: 5px; }
  .hero-bottom { gap: 12px; padding-block: 18px; }
  .hero-bottom .route-label { font-size: 10px; letter-spacing: .08em; }
  .hero-bottom > a:last-child { display: none; }
  .career-route span { font-size: 14px; }
  .section { padding: 48px 20px; }
  .section-heading { gap: 16px; margin-bottom: 26px; }
  .kicker { font-size: 10px; line-height: 1.7; letter-spacing: .12em; margin-bottom: 16px; }
  .section-heading h2, .foundation h2 { font-size: clamp(32px, 8.5vw, 44px); line-height: 1.15; }
  .section-heading > p { font-size: 15px; line-height: 1.7; }
  .at-a-glance { padding: 4px 20px; }
  .at-a-glance > div, .at-a-glance > div + div { padding-block: 20px; column-gap: 10px; }
  .at-a-glance p { font-size: 14px; }
  .projects { gap: 20px; }
  .project { border-radius: 8px; }
  .project-body, .featured-project .project-body { padding: 22px 20px; }
  .project-top { margin-bottom: 16px; gap: 12px; font-size: 10px; }
  .project h3 { font-size: 25px; line-height: 1.25; margin-bottom: 14px; }
  .project p { font-size: 15px; line-height: 1.7; }
  .project .project-role, .detail p { font-size: 13px; }
  .project-flow { gap: 6px; padding-block: 12px; margin-bottom: 18px; }
  .project-flow span { font-size: 11px; }
  .tags { gap: 6px; }
  .tags span { font-size: 11px; padding: 4px 8px; }
  .project details { margin-top: 18px; }
  .featured-preview { padding: 14px; max-height: none; }
  .featured-preview img { aspect-ratio: 1.6; object-fit: cover; object-position: top; }
  .preview-browser { padding: 9px 10px; font-size: 10px; gap: 8px; }
  .repository-preview img { aspect-ratio: 1.8; }
  .repository-preview figcaption { padding: 10px 20px; font-size: 10px; }
  .live-label { font-size: 10px; padding: 4px 7px; }
  .journey { font-size: clamp(20px, 5.5vw, 30px); letter-spacing: -.04em; }
  .journey i { margin-inline: 12px; }
  .story-intro h3 { font-size: 25px; }
  .story-intro p, .timeline p, .skills p { font-size: 15px; line-height: 1.75; }
  .timeline h3 { font-size: 20px; }
  .timeline article > span { font-size: 10px; }
  .education { margin-top: 24px; padding-left: 18px; }
  .education h3 { font-size: 23px; }
  .research-note { padding-block: 28px; }
  .contact h2 { font-size: clamp(34px, 9vw, 48px); }
  .contact-bottom { margin-top: 24px; }
  footer { padding: 22px 20px; }
}
@media (max-width: 360px) {
  header { padding-inline: 16px; gap: 10px; }
  header nav { gap: 10px; }
  .nav-count { display: none; }
  .hero-actions { grid-template-columns: 1fr; gap: 8px; }
  .hero-actions .text-link { justify-self: start; }
  .project-top { flex-wrap: wrap; }
  .project-top > span { text-align: left; }
}

/* Reserve preview space before lazy images finish loading. */
.featured-preview img { aspect-ratio: 1.44; object-fit: cover; object-position: top; }
@media(max-width:700px) { .featured-preview img { aspect-ratio: 1.6; flex-shrink: 0; } }