:root{color-scheme:light; --bg:#f8fafc; --bg-rgb:248,250,252; --bg-soft:#f1f5f9; --surface:#ffffff; --surface-rgb:255,255,255; --surface-soft:#f8fafc; --surface-strong:#e2e8f0; --text:#0f172a; --text-soft:#334155; --muted:#64748b; --line:rgba(15,23,42,0.12); --green:#2563eb; --green-rgb:37,99,235; --green-strong:#1d4ed8; --green-soft:rgba(37,99,235,0.09); --brown:#0f766e; --brown-rgb:15,118,110; --brown-strong:#0d5f59; --brown-soft:rgba(15,118,110,0.09); --cream:#ffffff; --shadow:0 18px 48px rgba(15,23,42,0.11); --shadow-soft:0 8px 24px rgba(15,23,42,0.07); --hero-card-start:#1e3a5f; --hero-card-end:#0f2742; --hero-card-text:#ffffff; --hero-card-muted:rgba(255,255,255,0.76); --hero-card-line:rgba(255,255,255,0.16); --featured-start:#1e3a5f; --featured-end:#102a46; --featured-text:#ffffff; --featured-muted:rgba(255,255,255,0.78); --contact-start:#172554; --contact-end:#0f172a; --contact-text:#ffffff; --contact-muted:rgba(255,255,255,0.76); --radius-lg:22px; --radius-md:15px; --max-width:1180px; --display:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif; --sans:Inter,Aptos,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;} html[data-theme="dark"]{color-scheme:dark; --bg:#0f172a; --bg-rgb:15,23,42; --bg-soft:#111827; --surface:#172033; --surface-rgb:23,32,51; --surface-soft:#1e293b; --surface-strong:#334155; --text:#f8fafc; --text-soft:#dbe4ef; --muted:#94a3b8; --line:rgba(226,232,240,0.14); --green:#60a5fa; --green-rgb:96,165,250; --green-strong:#93c5fd; --green-soft:rgba(96,165,250,0.12); --brown:#2dd4bf; --brown-rgb:45,212,191; --brown-strong:#5eead4; --brown-soft:rgba(45,212,191,0.11); --cream:#ffffff; --shadow:0 22px 56px rgba(0,0,0,0.34); --shadow-soft:0 10px 30px rgba(0,0,0,0.24); --hero-card-start:#1e3a5f; --hero-card-end:#111c30; --hero-card-text:#ffffff; --hero-card-muted:rgba(255,255,255,0.76); --hero-card-line:rgba(255,255,255,0.15); --featured-start:#1d4f73; --featured-end:#142238; --featured-text:#ffffff; --featured-muted:rgba(255,255,255,0.78); --contact-start:#1e3a5f; --contact-end:#111827; --contact-text:#ffffff; --contact-muted:rgba(255,255,255,0.76);} *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0; color:var(--text); background:radial-gradient(circle at 8% 0%,rgba(var(--green-rgb),0.07),transparent 25rem),radial-gradient(circle at 96% 18%,rgba(var(--brown-rgb),0.055),transparent 28rem),var(--bg); font-family:var(--sans); line-height:1.65; overflow-x:hidden; transition:color 240ms ease,background-color 240ms ease;} body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:linear-gradient( 90deg,transparent 0,transparent calc(50% - 1px),rgba(var(--green-rgb),0.025)50%,transparent calc(50%+1px)),linear-gradient(rgba(var(--surface-rgb),0.34),transparent); opacity:0.85;} a{color:inherit; text-decoration:none;} button,a{-webkit-tap-highlight-color:transparent;} button{font:inherit;} img{display:block; max-width:100%;} h1,h2,h3,p{margin-top:0;} h1,.section-heading h2,.contact-panel h2{font-family:var(--display);} .container{width:min(calc(100% - 40px),var(--max-width)); margin-inline:auto;} .mono{font-family:var(--sans); letter-spacing:0.11em;} .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;} .eyebrow{display:inline-flex; align-items:center; gap:12px; margin:0 0 16px; color:var(--brown); font-size:0.74rem; font-weight:800; letter-spacing:0.17em; text-transform:uppercase;} .eyebrow::before{content:""; width:30px; height:2px; border-radius:99px; background:currentColor;} .site-header{position:sticky; top:0; z-index:30; border-bottom:1px solid transparent; background:rgba(var(--bg-rgb),0.84); backdrop-filter:blur(18px); transition:border-color 180ms ease,background 180ms ease,box-shadow 180ms ease;} .site-header.scrolled{border-color:var(--line); background:rgba(var(--bg-rgb),0.96); box-shadow:0 8px 24px rgba(30,43,33,0.07);} .nav-shell{min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px;} .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-0.02em;} .brand-mark{width:38px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(var(--brown-rgb),0.32); border-radius:50%; color:var(--brown); background:var(--brown-soft); font-size:0.78rem;} .nav-links{display:flex; align-items:center; gap:24px; color:var(--muted); font-size:0.88rem; font-weight:700;} .nav-links a{position:relative; padding-block:8px; transition:color 160ms ease;} .nav-links a:hover,.nav-links a:focus-visible{color:var(--text);} .nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:2px; height:2px; border-radius:99px; background:var(--green); transition:right 180ms ease;} .nav-links a:hover::after,.nav-links a:focus-visible::after{right:0;} .header-actions{display:flex; align-items:center; gap:9px;} .lang-switch{display:inline-flex; padding:4px; border:1px solid var(--line); border-radius:999px; background:rgba(var(--surface-rgb),0.72);} .lang-switch button{border:0; border-radius:999px; padding:7px 11px; color:var(--muted); background:transparent; cursor:pointer; font-size:0.76rem; font-weight:800;} .lang-switch button[aria-pressed="true"]{color:#ffffff; background:var(--green);} .theme-toggle,.menu-toggle{width:42px; height:42px; display:inline-grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--text); background:rgba(var(--surface-rgb),0.72); cursor:pointer; transition:transform 160ms ease,border-color 160ms ease,background 160ms ease;} .theme-toggle:hover,.theme-toggle:focus-visible,.menu-toggle:hover,.menu-toggle:focus-visible{transform:translateY(-1px); border-color:rgba(var(--green-rgb),0.40); background:var(--surface);} .theme-toggle{position:relative; overflow:hidden;} .theme-toggle-icon{font-size:1rem; line-height:1; transition:transform 220ms ease,opacity 220ms ease;} html[data-theme="dark"] .theme-toggle-icon{transform:rotate(-16deg);} .menu-toggle{display:none;} .hero{position:relative; min-height:auto; display:grid; align-items:center; padding:92px 0 72px;} .hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr)minmax(330px,0.72fr); align-items:center; gap:76px;} .availability{display:inline-flex; align-items:center; gap:10px; margin-bottom:26px; padding:8px 12px; border:1px solid rgba(var(--green-rgb),0.24); border-radius:999px; color:var(--green-strong); background:var(--green-soft); font-size:0.78rem; font-weight:800;} .availability-dot{width:7px; height:7px; border-radius:50%; background:var(--green);} .hero h1{max-width:900px; margin-bottom:24px; font-size:clamp(4rem,8vw,7.1rem); font-weight:600; line-height:0.88; letter-spacing:-0.065em;} .hero h1 span{display:block; color:var(--green); background:none; -webkit-text-fill-color:initial;} .hero-lead{max-width:760px; margin-bottom:34px; color:var(--muted); font-size:clamp(1.04rem,2vw,1.22rem);} .hero-actions{display:flex; flex-wrap:wrap; gap:12px;} .btn{min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 19px; border:1px solid transparent; border-radius:999px; font-weight:800; transition:transform 160ms ease,border-color 160ms ease,background 160ms ease,box-shadow 160ms ease;} .btn:hover,.btn:focus-visible{transform:translateY(-2px);} .btn-primary{color:var(--cream); background:var(--green); box-shadow:0 10px 22px rgba(var(--green-rgb),0.18);} .btn-primary:hover{background:var(--green-strong);} .btn-secondary{border-color:var(--line); color:var(--text); background:rgba(var(--surface-rgb),0.70);} .hero-links{display:flex; flex-wrap:wrap; gap:20px; margin-top:28px; color:var(--muted); font-size:0.88rem;} .hero-links a{display:inline-flex; align-items:center; gap:8px;} .hero-links a:hover{color:var(--brown);} .status-card{position:relative; overflow:hidden; padding:30px; border:0; border-radius:var(--radius-lg); color:var(--hero-card-text); background:linear-gradient(145deg,var(--hero-card-start),var(--hero-card-end)); box-shadow:0 24px 54px rgba(28,43,32,0.20);} .status-card::before{content:""; position:absolute; width:170px; height:170px; right:-68px; top:-72px; border:1px solid var(--hero-card-line); border-radius:50%; box-shadow:0 0 0 28px rgba(255,255,255,0.025),0 0 0 56px rgba(255,255,255,0.018);} .profile-row{position:relative; display:flex; align-items:center; gap:16px; padding-bottom:24px; border-bottom:1px solid var(--hero-card-line);} .profile-photo{width:78px; height:78px; flex:0 0 78px; position:relative; display:grid; place-items:center; overflow:hidden; border:2px solid rgba(255,255,255,0.22); border-radius:50%; background:rgba(255,255,255,0.08); color:var(--hero-card-text); font-size:1.15rem; font-weight:900;} .profile-photo img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;} .profile-row h2{margin-bottom:4px; font-family:var(--sans); font-size:1.23rem; letter-spacing:-0.02em;} .profile-row p{margin-bottom:0; color:var(--hero-card-muted); font-size:0.88rem;} .status-block{position:relative; padding-top:24px;} .status-label{margin-bottom:14px; color:var(--hero-card-muted); font-size:0.68rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;} .status-list{display:grid; gap:12px; margin:0; padding:0; list-style:none;} .status-list li{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:12px; border-bottom:1px solid var(--hero-card-line); color:var(--hero-card-muted); font-size:0.88rem;} .status-list li:last-child{padding-bottom:0; border-bottom:0;} .status-list strong{color:var(--hero-card-text); text-align:right;} .network-visual{display:none;} section{padding:74px 0; scroll-margin-top:72px;} .section-heading{display:grid; grid-template-columns:0.78fr 1.22fr; gap:52px; align-items:end; margin-bottom:42px;} .section-heading h2{margin-bottom:0; font-size:clamp(2.8rem,5vw,4.5rem); font-weight:600; line-height:0.98; letter-spacing:-0.045em;} .section-heading p{max-width:650px; margin:0; color:var(--muted); font-size:1.02rem;} .expertise-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;} .expertise-card,.project-card,.education-card,.hobby-card{border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(var(--surface-rgb),0.88); box-shadow:var(--shadow-soft);} .expertise-card{position:relative; overflow:hidden; padding:30px; transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease;} .expertise-card::before{content:""; position:absolute; left:0; top:0; width:5px; height:100%; background:linear-gradient(to bottom,var(--green),rgba(var(--green-rgb),0.12));} .expertise-card:nth-child(3n+2)::before{background:linear-gradient(to bottom,var(--brown),rgba(var(--brown-rgb),0.12));} .expertise-card:hover{transform:translateY(-4px); border-color:rgba(var(--green-rgb),0.30); box-shadow:var(--shadow);} .card-number{display:inline-block; margin-bottom:38px; color:var(--brown); font-size:0.72rem; font-weight:800; letter-spacing:0.14em;} .expertise-card h3,.project-card h3{margin-bottom:11px; font-size:1.32rem; letter-spacing:-0.02em;} .expertise-card p,.project-card p,.education-card p,.hobby-card p{margin-bottom:0; color:var(--muted);} .expertise-points{display:grid; gap:8px; margin:20px 0 0; padding:0; list-style:none;} .expertise-points li{position:relative; padding-left:20px; color:var(--text-soft); font-size:0.92rem;} .expertise-points li::before{content:""; position:absolute; width:6px; height:6px; left:0; top:0.72em; border-radius:50%; background:var(--green);} .tag-list,.hobby-tags{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding:0; list-style:none;} .tag-list li,.hobby-tags li{padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--text-soft); background:rgba(var(--surface-rgb),0.58); font-size:0.76rem; font-weight:750;} #experience{background:rgba(var(--surface-rgb),0.34); border-block:1px solid rgba(var(--green-rgb),0.07);} .experience-list{position:relative; display:grid; gap:0;} .experience-item{display:grid; grid-template-columns:210px minmax(0,1fr); gap:42px; padding:38px 0; border-top:1px solid var(--line);} .experience-meta{color:var(--muted); font-size:0.88rem;} .experience-meta strong{display:block; margin-bottom:8px; color:var(--brown); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;} .experience-content h3{margin-bottom:8px; font-size:clamp(1.45rem,3vw,2.15rem); letter-spacing:-0.03em;} .company{color:var(--muted); font-weight:650;} .experience-summary{max-width:790px; margin:18px 0 20px; color:var(--muted);} .achievement-list{display:grid; gap:10px; margin:0; padding:0; list-style:none;} .achievement-list li{position:relative; padding-left:22px; color:var(--text-soft);} .achievement-list li::before{content:""; position:absolute; width:7px; height:7px; left:0; top:0.69em; border-radius:50%; background:var(--brown);} .projects-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:stretch;} .project-card{min-height:0; display:flex; flex-direction:column; justify-content:space-between; padding:30px; overflow:hidden; position:relative;} .project-card.featured{grid-column:1 / -1; color:var(--featured-text); border:0; background:radial-gradient(circle at 95% 12%,rgba(255,255,255,0.08),transparent 16rem),linear-gradient(135deg,var(--featured-start),var(--featured-end)); box-shadow:0 24px 54px rgba(28,43,32,0.18);} .project-card.featured p,.project-card.featured .expertise-points li{color:var(--featured-muted);} .project-card.featured .expertise-points li::before{background:#d5bb9f;} .project-card.featured .tag-list li{border-color:rgba(255,255,255,0.18); color:rgba(255,255,255,0.86); background:rgba(255,255,255,0.06);} .project-card.featured .project-top{max-width:920px;} .project-actions{position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;} .project-link{min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 15px; border:1px solid var(--line); border-radius:999px; color:var(--text); background:rgba(var(--surface-rgb),0.72); font-size:0.82rem; font-weight:800; transition:transform 160ms ease,border-color 160ms ease,background 160ms ease;} .project-link:hover,.project-link:focus-visible{transform:translateY(-2px); border-color:rgba(var(--green-rgb),0.36); background:var(--surface);} .homelab-figure{position:relative; z-index:1; margin:34px 0 4px; padding:22px; border:1px solid rgba(255,255,255,0.14); border-radius:16px; background:rgba(255,255,255,0.045);} .homelab-figure-header{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px;} .homelab-figure-header h4{margin:0; color:var(--featured-text); font-size:1rem; letter-spacing:-0.015em;} .homelab-figure-header p{margin:0; color:var(--featured-muted); font-size:0.78rem; text-align:right;} .homelab-diagram{width:100%; height:auto; display:block; overflow:visible;} .homelab-diagram .diagram-link{fill:none; stroke:rgba(255,255,255,0.32); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;} .homelab-diagram .diagram-link.dashed{stroke-dasharray:8 9;} .homelab-diagram .diagram-node{fill:rgba(255,255,255,0.075); stroke:rgba(255,255,255,0.22); stroke-width:2;} .homelab-diagram .diagram-node.primary{fill:rgba(96,165,250,0.16); stroke:rgba(147,197,253,0.58);} .homelab-diagram .diagram-node.storage{fill:rgba(45,212,191,0.12); stroke:rgba(94,234,212,0.44);} .homelab-diagram .diagram-title{fill:#ffffff; font-family:var(--sans); font-size:20px; font-weight:800; text-anchor:middle;} .homelab-diagram .diagram-subtitle{fill:rgba(255,255,255,0.66); font-family:var(--sans); font-size:13px; font-weight:650; text-anchor:middle;} .homelab-diagram .diagram-badge{fill:rgba(255,255,255,0.075); stroke:rgba(255,255,255,0.18); stroke-width:1;} .homelab-diagram .diagram-badge-text{fill:rgba(255,255,255,0.88); font-family:var(--sans); font-size:12px; font-weight:750; text-anchor:middle;} .homelab-caption{margin:16px 0 0; color:rgba(255,255,255,0.58); font-size:0.75rem;} .project-card::after{content:""; position:absolute; width:170px; height:170px; right:-90px; bottom:-90px; border:1px solid rgba(var(--brown-rgb),0.13); border-radius:50%; box-shadow:0 0 0 34px rgba(var(--brown-rgb),0.025),0 0 0 68px rgba(var(--brown-rgb),0.015);} .project-card.featured::after{border-color:rgba(255,255,255,0.12); box-shadow:0 0 0 34px rgba(255,255,255,0.025),0 0 0 68px rgba(255,255,255,0.015);} .project-top{position:relative; z-index:1;} .project-type{display:block; margin-bottom:36px; color:var(--brown); font-size:0.72rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;} .project-card.featured .project-type{color:#dfc4a8;} .education-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;} .education-card.degree{grid-column:1 / -1; background:linear-gradient( 135deg,rgba(var(--green-rgb),0.08),rgba(var(--surface-rgb),0.92));} .education-card{padding:30px;} .education-card .date{display:block; margin-bottom:34px; color:var(--brown); font-size:0.72rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;} .education-card h3{margin-bottom:10px; font-size:1.34rem; letter-spacing:-0.02em;} .hobbies-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;} .hobby-card{position:relative; overflow:hidden; min-height:320px; display:flex; flex-direction:column; padding:28px; transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease;} .hobby-card:nth-child(1){background:rgba(var(--surface-rgb),0.92);} .hobby-card:nth-child(2){background:linear-gradient(145deg,rgba(var(--green-rgb),0.055),rgba(var(--surface-rgb),0.96));} .hobby-card:nth-child(3){background:linear-gradient(145deg,rgba(var(--brown-rgb),0.045),rgba(var(--surface-rgb),0.96));} .hobby-card:hover{transform:translateY(-4px); border-color:rgba(var(--green-rgb),0.27); box-shadow:var(--shadow);} .hobby-card .card-number{margin-bottom:38px;} .hobby-card h3{margin-bottom:12px; font-size:1.3rem; letter-spacing:-0.02em;} .hobby-tags{margin-top:auto; padding-top:24px;} .contact-panel{position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:42px; align-items:center; padding:clamp(34px,6vw,68px); border:0; border-radius:var(--radius-lg); color:var(--contact-text); background:radial-gradient(circle at 96% 10%,rgba(255,255,255,0.08),transparent 16rem),linear-gradient(135deg,var(--contact-start),var(--contact-end)); box-shadow:0 24px 54px rgba(28,43,32,0.19);} .contact-panel .eyebrow{color:#dec0a2;} .contact-panel h2{max-width:760px; margin-bottom:14px; font-size:clamp(2.7rem,5vw,4.5rem); font-weight:600; line-height:0.98; letter-spacing:-0.045em;} .contact-panel p{max-width:680px; margin-bottom:0; color:var(--contact-muted);} .contact-panel .btn-primary{color:#0f172a; background:#ffffff; box-shadow:none;} footer{padding:34px 0 44px; color:var(--muted); font-size:0.82rem;} .footer-row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:26px; border-top:1px solid var(--line);} .reveal{opacity:0; transform:translateY(16px); transition:opacity 560ms ease,transform 560ms ease;} .reveal.visible{opacity:1; transform:translateY(0);} :focus-visible{outline:3px solid rgba(var(--green-rgb),0.35); outline-offset:4px;} @media (max-width:1040px){.nav-links{position:absolute; top:72px; left:18px; right:18px; display:none; flex-direction:column; align-items:stretch; gap:4px; padding:16px; border:1px solid var(--line); border-radius:16px; background:rgba(var(--surface-rgb),0.98); box-shadow:var(--shadow);} .nav-links.open{display:flex;} .nav-links a{padding:10px 12px;} .menu-toggle{display:inline-grid;} .hero-grid,.section-heading,.education-grid,.contact-panel{grid-template-columns:1fr;} .education-card.degree{grid-column:auto;} .hero{padding-top:76px; padding-bottom:58px;} .status-card{max-width:620px;} .projects-grid{grid-template-columns:1fr;} .project-card.featured{grid-column:auto;} .homelab-figure{padding:16px; overflow-x:auto;} .homelab-figure-header{align-items:flex-start; flex-direction:column; gap:6px;} .homelab-figure-header p{text-align:left;} .homelab-diagram{min-width:900px;} .experience-item{grid-template-columns:1fr; gap:16px;} .contact-panel .btn{justify-self:start;} } @media (max-width:720px){.container{width:min(calc(100% - 24px),var(--max-width));} .brand span:last-child{display:none;} .hero{padding-top:58px;} .hero-grid{gap:42px;} .hero h1{font-size:clamp(3.8rem,18vw,5.6rem);} section{padding:58px 0;} .section-heading{gap:20px; margin-bottom:34px;} .expertise-grid,.hobbies-grid{grid-template-columns:1fr;} .expertise-card,.project-card,.education-card,.hobby-card{padding:24px;} .card-number{margin-bottom:30px;} .hobby-card{min-height:0;} .footer-row{align-items:flex-start; flex-direction:column;} } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;} .reveal{opacity:1; transform:none;} } @media print{:root,html[data-theme="dark"]{color-scheme:light; --bg:white; --bg-rgb:255,255,255; --surface:white; --surface-rgb:255,255,255; --text:#111827; --text-soft:#374151; --muted:#4b5563; --line:#d1d5db;} body{background:white; color:#111827; font-size:10pt;} body::before,.site-header,.network-visual,.hero-actions,.hero-links,.availability,footer{display:none !important;} .hero{min-height:auto; padding:0 0 24px;} .hero-grid,.section-heading,.education-grid{grid-template-columns:1fr;} .status-card,.expertise-card,.project-card,.education-card,.hobby-card,.contact-panel{box-shadow:none; break-inside:avoid; color:#111827; background:white;} section{padding:28px 0;} .reveal{opacity:1; transform:none;} }