:root { --blue:#0b35f0; --blue-light:#3155f4; --orange:#ff5a16; --white:#fffdf7; --soft:#b9c6ff; --line:rgba(255,255,255,.21); --black:#050505; --sans:Arial,Helvetica,sans-serif; --mono:"Courier New",Courier,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body { margin:0; min-width:320px; overflow-x:hidden; color:var(--white); background:var(--black); font-family:var(--sans); font-size:1rem; line-height:1.5; }
a { color:inherit; } button { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:300; top:12px; left:12px; padding:10px 15px; color:var(--black); background:var(--white); transform:translateY(-170%); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:sticky; z-index:200; top:0; min-height:68px; display:flex; align-items:center; justify-content:space-between; padding:8px clamp(18px,4vw,56px); border-bottom:1px solid #242424; background:rgba(5,5,5,.96); backdrop-filter:blur(12px); }
.wordmark { display:flex; align-items:center; gap:12px; text-decoration:none; line-height:1.1; }
.wordmark-mark { width:38px; height:38px; display:grid; place-items:center; border:1px solid #5a5a5a; font:700 .72rem/1 var(--mono); }
.wordmark strong,.wordmark small { display:block; } .wordmark strong { font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; } .wordmark small { margin-top:4px; color:#8b8b8b; font:.66rem/1.2 var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.site-nav { display:flex; align-items:center; gap:4px; } .site-nav a { min-height:44px; display:inline-flex; align-items:center; padding:0 13px; color:#9a9a9a; text-decoration:none; font:.72rem/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.site-nav a::before { content:""; width:6px; height:6px; margin-right:9px; border:1px solid #777; border-radius:50%; } .site-nav a:hover,.site-nav a.active { color:var(--white); } .site-nav a.active::before { border-color:var(--orange); background:var(--orange); }
.menu-button { display:none; width:44px; height:44px; padding:10px; border:1px solid #555; color:white; background:transparent; } .menu-button>span:not(.sr-only) { display:block; height:1px; margin:5px 0; background:currentColor; }
.section-rail { position:fixed; z-index:150; top:50%; right:2.1vw; display:grid; gap:18px; transform:translateY(-50%); } .section-rail a { width:15px; height:15px; border:1px solid var(--white); border-radius:50%; } .section-rail a.active { border-color:var(--orange); background:var(--orange); }
main { padding:0 clamp(0px,1.2vw,18px) 18px; }
.panel { position:relative; min-height:calc(100svh - 86px); display:flex; flex-direction:column; padding:clamp(34px,4vw,64px) clamp(24px,7vw,104px) 32px; overflow:hidden; border-radius:9px; background:var(--blue); }
.panel>* { min-width:0; }
.panel+.panel { margin-top:18px; }
.system-line,.panel-footer { display:flex; justify-content:space-between; gap:24px; color:#d7deff; font:700 clamp(.68rem,.85vw,.8rem)/1.25 var(--mono); text-transform:uppercase; letter-spacing:.17em; }
.system-line { margin-bottom:clamp(44px,8vh,92px); } .hero-system { justify-content:flex-end; } .status { color:var(--orange); } .status i { width:8px; height:8px; display:inline-block; margin-right:9px; border-radius:50%; background:var(--orange); }
.panel-footer { align-items:end; margin-top:auto; padding-top:34px; } .panel-footer a { text-underline-offset:5px; }
.micro-label { margin:0; color:var(--soft); font:700 .75rem/1.4 var(--mono); text-transform:uppercase; letter-spacing:.14em; } .micro-label.orange { color:var(--orange); }
.hero-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(340px,.44fr); align-items:end; gap:clamp(32px,5vw,76px); }
.hero-copy { min-width:0; }
.hero h1,.section-intro h2,.contact h2 { margin:16px 0 0; font-size:clamp(5rem,11.4vw,10.8rem); line-height:.79; font-weight:500; letter-spacing:-.075em; } .hero h1 { font-size:clamp(4.2rem,8.8vw,8rem); } .hero h1 em,.section-intro h2 em,.contact h2 em { font-weight:400; }
.hero-statement { max-width:850px; margin:clamp(30px,5vh,56px) 0 0; font-size:clamp(1.4rem,2.5vw,2.3rem); line-height:1.08; letter-spacing:-.025em; }
.portrait-wrap { margin:0; } .portrait-wrap img { width:100%; max-height:520px; display:block; object-fit:cover; object-position:53% center; border:1px solid var(--line); filter:saturate(.75) contrast(1.06); } .portrait-wrap figcaption { display:flex; justify-content:space-between; gap:18px; padding-top:13px; font:.7rem/1.3 var(--mono); text-transform:uppercase; } .portrait-wrap figcaption span { color:var(--soft); }
.hero-lower { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.55fr); gap:clamp(34px,7vw,100px); margin-top:clamp(44px,7vh,78px); padding-top:28px; border-top:1px solid var(--line); } .hero-bio { max-width:930px; margin:0; font-size:clamp(1rem,1.35vw,1.22rem); line-height:1.48; }
.current-focus { padding-left:28px; border-left:1px solid var(--line); } .current-focus p:not(.micro-label) { margin:15px 0 20px; color:#dde3ff; font-size:1rem; line-height:1.35; } .current-focus a { font:700 .8rem/1 var(--mono); text-underline-offset:5px; text-decoration-color:var(--orange); }
.section-intro { display:grid; grid-template-columns:minmax(0,.8fr) minmax(310px,.45fr); gap:28px 70px; align-items:end; margin-bottom:clamp(42px,8vh,80px); } .section-intro .micro-label { grid-column:1/-1; }
.section-intro h2 { max-width:900px; margin-top:0; font-size:clamp(4rem,8.5vw,8rem); } .section-intro>p:last-child { max-width:480px; margin:0 0 5px; color:#d7deff; font-size:clamp(1rem,1.4vw,1.25rem); line-height:1.35; } .section-intro.compact h2 { font-size:clamp(4rem,7.5vw,7rem); }
.project-card { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr); background:var(--blue-light); } .project-copy { padding:clamp(28px,4vw,58px); } .project-copy h3 { max-width:930px; margin:18px 0 36px; font-size:clamp(2rem,4.2vw,4.2rem); line-height:.98; font-weight:600; letter-spacing:-.045em; }
.project-meta { display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:20px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .project-meta span,.project-meta strong { display:block; } .project-meta span { margin-bottom:6px; color:var(--soft); font:.68rem/1.3 var(--mono); text-transform:uppercase; letter-spacing:.11em; } .project-meta strong { font-size:.96rem; line-height:1.3; }
.project-details { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:34px; } .project-details h4 { margin:0 0 10px; color:var(--orange); font:700 .74rem/1.2 var(--mono); text-transform:uppercase; letter-spacing:.12em; } .project-details p { margin:0; color:#eef0ff; font-size:.98rem; line-height:1.5; }
.workflow { display:flex; flex-direction:column; padding:clamp(28px,3vw,44px); border-left:1px solid var(--line); } .workflow>div { flex:1; padding:24px 0; border-bottom:1px solid var(--line); } .workflow>div:last-child { border-bottom:0; } .workflow span { display:block; margin-bottom:20px; color:var(--orange); font:.72rem/1 var(--mono); } .workflow strong,.workflow small { display:block; } .workflow strong { margin-bottom:8px; font-size:1.15rem; } .workflow small { color:var(--soft); font-size:.85rem; line-height:1.35; }
.research blockquote { max-width:1000px; margin:clamp(50px,8vh,86px) auto; text-align:center; font-size:clamp(1.6rem,3.25vw,3rem); line-height:1.18; letter-spacing:-.025em; }
.coursework-intro { grid-template-columns:minmax(0,1fr) minmax(300px,.5fr); }
.degree-summary { align-self:end; padding:22px 0 6px 28px; border-left:1px solid var(--line); }
.degree-summary span,.degree-summary strong { display:block; }
.degree-summary span { margin-bottom:8px; font-size:clamp(1.25rem,2vw,1.8rem); font-weight:700; }
.degree-summary strong { color:var(--soft); font:700 .75rem/1.5 var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.course-grid { border-top:1px solid var(--line); }
.course-grid article { display:grid; grid-template-columns:72px minmax(190px,.45fr) minmax(0,1fr); gap:clamp(20px,4vw,64px); align-items:center; min-height:0; padding:clamp(24px,3vw,38px) 0; border-bottom:1px solid var(--line); }
.course-index { display:block; color:var(--orange); font:700 .76rem/1 var(--mono); }
.course-grid .micro-label { margin:0; }
.course-grid h3 { max-width:none; margin:0; font-size:clamp(1.45rem,2.6vw,2.7rem); line-height:1.08; letter-spacing:-.03em; }
.progress-log,.experience-log { border-top:1px solid var(--line); } .progress-log article,.experience-log article { display:grid; grid-template-columns:120px minmax(0,1fr) 120px; gap:clamp(24px,5vw,72px); align-items:start; padding:clamp(26px,4vh,44px) 0; border-bottom:1px solid var(--line); } .progress-log time,.experience-log time { padding-top:5px; font:.82rem/1.5 var(--mono); text-transform:uppercase; }
.progress-log h3,.experience-log h3 { margin:9px 0 8px; font-size:clamp(1.55rem,3vw,2.9rem); line-height:1.06; letter-spacing:-.035em; } .progress-log p,.experience-log p { max-width:850px; margin:0; color:#dce3ff; font-size:1rem; } .tag { justify-self:end; padding-top:6px; color:var(--soft); font:.68rem/1.2 var(--mono); text-align:right; text-transform:uppercase; letter-spacing:.08em; } .active-tag { color:var(--orange); } .active-tag::before { content:""; width:7px; height:7px; display:inline-block; margin-right:8px; border-radius:50%; background:currentColor; }
.resume-intro { grid-template-columns:minmax(0,1fr) auto; } .resume-intro .download-button { align-self:end; margin-bottom:7px; } .download-button { min-height:52px; display:inline-flex; align-items:center; justify-content:space-between; gap:34px; padding:12px 18px; border:1px solid var(--white); text-decoration:none; font:700 .76rem/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; } .download-button:hover { color:var(--black); background:var(--white); }
.contact { justify-content:space-between; } .contact-copy { max-width:1200px; margin:auto 0; } .contact h2 { margin:20px 0 36px; font-size:clamp(4.4rem,10.2vw,10rem); } .contact-copy>p:not(.micro-label) { max-width:600px; color:#dce3ff; font-size:1.15rem; } .contact-copy>a { display:inline-block; margin-top:24px; font-size:clamp(1.5rem,3.2vw,3rem); text-underline-offset:10px; text-decoration-color:var(--orange); }
@media (max-width:980px) { .section-rail { display:none; } .menu-button { display:block; } .site-nav { position:absolute; top:100%; right:0; left:0; display:none; padding:12px 24px 18px; border-bottom:1px solid #333; background:var(--black); } .site-nav.open { display:grid; } .site-nav a { padding:0; } .panel { min-height:auto; padding-bottom:30px; border-radius:0; } .hero-grid,.section-intro,.project-card { grid-template-columns:1fr; } .hero-grid { align-items:start; } .portrait-wrap { width:min(65%,430px); } .section-intro .micro-label { grid-column:auto; } .section-intro>p:last-child { max-width:680px; } .degree-summary { padding:22px 0 0; border-top:1px solid var(--line); border-left:0; } .workflow { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; border-top:1px solid var(--line); border-left:0; } .workflow>.micro-label { grid-column:1/-1; } .workflow>div { border-right:1px solid var(--line); border-bottom:0; padding-right:20px; } .workflow>div:last-child { border-right:0; } }
@media (max-width:680px) { html { scroll-padding-top:68px; } main { padding:0; } .wordmark small { display:none; } .panel+.panel { margin-top:8px; } .panel { padding:28px 20px 26px; } .system-line { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:48px; overflow-wrap:anywhere; } .system-line .status { align-self:flex-start; } .micro-label { font-size:.66rem; overflow-wrap:anywhere; } .hero h1 { font-size:clamp(4rem,21vw,6.2rem); } .hero-grid { gap:40px; } .hero-statement { width:100%; font-size:1.2rem; overflow-wrap:break-word; } .portrait-wrap { width:92%; } .hero-lower,.project-details,.project-meta { grid-template-columns:1fr; } .hero-lower { gap:30px; } .current-focus { padding:24px 0 0; border-top:1px solid var(--line); border-left:0; } .section-intro h2,.section-intro.compact h2,.contact h2 { font-size:clamp(3.6rem,18vw,5.5rem); } .project-copy { padding:26px 20px; } .workflow { grid-template-columns:1fr; } .workflow>.micro-label { grid-column:auto; } .workflow>div { border-right:0; border-bottom:1px solid var(--line); padding-right:0; } .course-grid article { grid-template-columns:42px minmax(0,1fr); gap:10px 14px; padding:24px 0; } .course-grid .micro-label { grid-column:2; } .course-grid h3 { grid-column:2; } .course-index { grid-row:1 / span 2; align-self:start; padding-top:3px; } .progress-log article,.experience-log article { grid-template-columns:1fr; gap:12px; } .tag { justify-self:start; } .resume-intro { grid-template-columns:1fr; } .resume-intro .download-button { justify-self:stretch; margin:10px 0 0; } .panel-footer { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }