:root{--black:#0d0d0f;--red:#970e31;--white:#fff;--muted:#777;--cream:#f8f7f5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:#161616;font-family:Arial,Helvetica,sans-serif}a{color:inherit}.topbar{height:78px;padding:0 clamp(22px,5.5vw,100px);display:flex;align-items:center;justify-content:space-between;background:#101012;color:#fff;position:relative;z-index:3}.brand{text-decoration:none;font-weight:900;font-size:18px;letter-spacing:.095em;white-space:nowrap}.brand-dot{color:#b31540}.topbar nav{display:flex;gap:clamp(16px,2.7vw,42px)}.topbar nav a{text-decoration:none;font-size:13px;font-weight:600;color:#d4d4d4;padding:30px 0 25px;border-bottom:3px solid transparent}.topbar nav a:hover,.topbar nav a.active{color:#fff;border-color:#ba1946}.hero{min-height:650px;height:calc(100svh - 78px);max-height:930px;position:relative;overflow:hidden;background:#240e17;color:#fff}.hero-photo{position:absolute;inset:0;background:url('assets/graduation.jpeg') center 42% / cover no-repeat}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,5,9,.94) 0%,rgba(12,6,10,.84) 30%,rgba(24,5,12,.28) 66%,rgba(0,0,0,.05) 100%),linear-gradient(0deg,rgba(0,0,0,.4),transparent 35%)}.hero-inner{height:100%;position:relative;display:flex;align-items:center;padding:65px clamp(25px,7vw,130px)}.hero-copy{max-width:670px}.eyebrow{font-size:11px;letter-spacing:.23em;font-weight:800;color:#e0a1b1}.burgundy{color:var(--red)}.hero h1{font-size:clamp(70px,9vw,146px);letter-spacing:-.075em;line-height:.89;margin:25px 0 28px;font-weight:900}.hero h1 span,.page-banner h1 span,.contact-hero h1 span{color:#c52350}.short-rule{height:2px;width:68px;background:#c3234d;margin:25px 0}.hero-subtitle{font-size:clamp(19px,2vw,28px);line-height:1.65;font-weight:400;margin:0 0 30px}.hero-subtitle b{color:#b41d43;padding:0 8px}.button{display:inline-flex;align-items:center;gap:36px;padding:17px 25px;background:#a20f37;border:0;color:white;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.09em;cursor:pointer}.button:hover{background:#c21e4b}.button:disabled{opacity:.65;cursor:not-allowed}.hero-credit{position:absolute;bottom:23px;right:35px;font-size:10px;letter-spacing:.14em;color:#ddd}.intro{display:grid;grid-template-columns:1.2fr 1fr;gap:75px;align-items:end;padding:105px clamp(25px,8vw,145px)}.intro h2{font-size:clamp(32px,4vw,57px);line-height:1.12;letter-spacing:-.045em;margin:15px 0 0}.intro p:not(.eyebrow){font-size:19px;line-height:1.8;color:#666}.text-link{font-size:12px;font-weight:800;letter-spacing:.1em;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:10px}.quick-links{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#dedede}.quick-links a{padding:45px clamp(25px,5vw,80px);background:#fff;text-decoration:none;display:flex;flex-direction:column;gap:23px}.quick-links span{font-size:10px;color:var(--red);letter-spacing:.14em;font-weight:800}.quick-links strong{font-size:clamp(24px,3vw,38px)}.quick-links a:hover{background:#f3e9ec}footer{background:#101012;color:#bbb;display:flex;justify-content:space-between;gap:15px;padding:28px clamp(25px,5.5vw,100px);font-size:12px}.page-banner{min-height:490px;display:grid;grid-template-columns:1fr 37%;overflow:hidden}.page-banner>div:first-child{padding:100px clamp(25px,8vw,145px);z-index:1}.page-banner h1,.portfolio-head h1,.contact-hero h1{font-size:clamp(65px,8vw,120px);letter-spacing:-.07em;line-height:1;margin:20px 0}.page-banner p:not(.eyebrow){max-width:480px;font-size:19px;line-height:1.6;color:#666}.resume-photo{background:url('assets/graduation.jpeg') 77% center / auto 110% no-repeat;clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}.resume-content{max-width:1120px;margin:auto;padding:45px 30px 115px}.resume-row{display:grid;grid-template-columns:110px 1fr;gap:25px;padding:40px 0;border-bottom:1px solid #ddd}.row-number{color:var(--red);font-size:13px;font-weight:800}.resume-row h2{font-size:33px;margin:0 0 20px}.resume-row h3{font-size:20px;margin-bottom:4px}.resume-row p{color:#666;line-height:1.7}.portfolio-head{background:#101012;color:#fff;padding:100px clamp(25px,8vw,145px) 75px}.portfolio-head h1 em{font-style:normal;color:#c22c52}.portfolio-head>p:last-child{font-size:18px;line-height:1.7;color:#bbb;max-width:600px}.portfolio-grid{background:#101012;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 clamp(25px,5vw,90px) 100px}.tile{min-height:370px;padding:35px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background-size:cover;position:relative;isolation:isolate;overflow:hidden}.tile:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.1))}.tile-one{background:radial-gradient(circle at 75% 30%,#66717d,#22262c 55%,#090a0b)}.tile-two{background:radial-gradient(circle at 75% 30%,#9b7959,#3e2923 55%,#151012)}.tile-three{background:radial-gradient(circle at 75% 30%,#6b7d8d,#263b45 55%,#0a1118)}.tile-four{background:radial-gradient(circle at 75% 30%,#627c8a,#1b293a 55%,#070e16)}.tile span{font-size:11px;letter-spacing:.16em;color:#e4bac4;font-weight:800}.tile h2{font-size:clamp(25px,3vw,42px);margin:13px 0}.tile p{color:#ddd;line-height:1.5;margin:0}.contact-hero{min-height:calc(100svh - 145px);background:linear-gradient(90deg,rgba(7,10,16,.92),rgba(10,16,24,.77)),radial-gradient(ellipse at 70% 70%,#46576a,#131d2c 65%,#080a10);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:75px;padding:105px clamp(25px,8vw,145px)}.contact-intro>p:not(.eyebrow){font-size:19px;line-height:1.7;color:#d2d4d7}.contact-intro .small-note{font-size:14px!important;color:#aaa!important}.contact-panel{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);padding:38px;align-self:start}.contact-panel h2{font-size:30px;margin:0 0 10px}.contact-panel p{font-size:14px;color:#ccc;line-height:1.6}.contact-panel form{display:grid;gap:15px;margin-top:25px}.contact-panel label{font-size:12px;letter-spacing:.06em;display:grid;gap:7px}.contact-panel input,.contact-panel textarea{width:100%;padding:13px;border:1px solid #777;background:#f7f7f7;color:#222;font:inherit}.contact-panel .button{justify-content:center}@media(max-width:760px){.topbar{height:auto;min-height:90px;flex-wrap:wrap;justify-content:center;gap:3px;padding:16px}.topbar nav{width:100%;justify-content:center;gap:20px}.topbar nav a{padding:12px 0 9px;font-size:12px}.hero{height:740px;min-height:610px}.hero-photo{background-position:60% center}.hero-overlay{background:linear-gradient(0deg,rgba(6,5,8,.97) 0%,rgba(8,6,9,.85) 40%,rgba(10,7,10,.15) 100%)}.hero-inner{align-items:flex-end;padding:40px 24px 95px}.hero h1{font-size:clamp(65px,14vw,100px)}.hero-credit{left:24px;right:auto}.intro{grid-template-columns:1fr;gap:20px;padding:65px 25px}.quick-links,.portfolio-grid{grid-template-columns:1fr}.page-banner{grid-template-columns:1fr;position:relative;min-height:470px}.page-banner>div:first-child{padding:85px 25px;background:linear-gradient(90deg,#f8f7f5 45%,rgba(248,247,245,.76));}.resume-photo{position:absolute;inset:0 0 0 45%;z-index:0;clip-path:none;opacity:.35}.resume-row{grid-template-columns:40px 1fr}.portfolio-head{padding:70px 25px}.portfolio-grid{padding:0 20px 70px}.tile{min-height:280px}.contact-hero{grid-template-columns:1fr;gap:35px;padding:65px 25px}.contact-panel{padding:25px}footer{flex-wrap:wrap}}
.tile-christian{background:linear-gradient(145deg,#16130d,#453522);min-height:550px}.tile-christian h2{color:#e5c37d}.tile-engine{background:radial-gradient(circle at 70% 25%,#465363,#141821 65%,#090b0f)}.project-images{display:flex;gap:12px;margin-top:22px;align-items:flex-start}.project-images img{width:calc(50% - 6px);max-height:310px;object-fit:cover;object-position:top;border:1px solid #947b49;border-radius:8px}.placeholder-tag{margin-top:25px;align-self:flex-start;border:1px solid #8b8991;padding:10px 14px;font-size:12px;color:#ddd}.tile-christian:before{background:linear-gradient(0deg,rgba(0,0,0,.3),rgba(0,0,0,.2))}

/* Editable image paths supplied by content JSON */
.hero-photo{background-image:var(--hero-image)!important}
.resume-photo{background-image:var(--resume-image)!important}
.project-links{margin-top:18px;display:flex;gap:16px;flex-wrap:wrap}


/* BANNER DESIGN V5 — keeps the original Design D home banner */
:root{--red:#8c173a;--gold:#d8b678}
.topbar{background:#0b0b0c}
.topbar nav a.active,.topbar nav a:hover{border-bottom-color:var(--red)}
.hero{min-height:680px}
.hero-photo{background-image:var(--hero-image)!important;background-position:center 42%}
.hero-overlay{background:linear-gradient(90deg,rgba(4,3,5,.95) 0%,rgba(11,4,8,.86) 29%,rgba(17,4,9,.34) 62%,rgba(0,0,0,.04) 100%)}
.hero-copy{max-width:min(650px,62vw)}
.hero h1{font-size:clamp(58px,8.4vw,132px);letter-spacing:-.07em}
.button{background:var(--red)}.button:hover{background:#b02650}
/* Resume: bright editorial layout, diagonal image */
body:has(.banner-resume){background:#fff}
.banner-resume{min-height:calc(100svh - 78px);display:grid;grid-template-columns:55% 45%;position:relative;overflow:hidden;background:#fff}
.banner-resume-text{padding:clamp(45px,5vw,85px) 0 60px clamp(35px,8vw,145px);position:relative;z-index:2}
.banner-resume h1,.banner-portfolio h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(50px,5.5vw,86px);font-weight:500;letter-spacing:-.045em;margin:0 0 42px}
.resume-highlights{display:grid;gap:clamp(28px,3vw,54px);max-width:520px}
.resume-highlight{display:grid;grid-template-columns:72px 1fr;gap:24px;align-items:start}
.resume-icon{color:var(--red);font-size:44px;line-height:1}
.resume-highlight h2{font-size:clamp(20px,1.9vw,28px);margin:0 0 8px}
.resume-highlight strong{display:block;font-size:17px}
.resume-highlight p{font-size:clamp(15px,1.35vw,19px);line-height:1.5;white-space:pre-line;margin:4px 0;color:#343434}
.banner-resume-photo{background-image:var(--resume-image);background-size:cover;background-position:62% center;clip-path:polygon(35% 0,100% 0,100% 100%,0 100%);margin-left:-18%;width:118%;min-height:650px}
/* Portfolio: six narrow photographic vertical cards */
body:has(.banner-portfolio){background:#fff}
.banner-portfolio{padding:36px clamp(20px,5vw,85px) 75px;min-height:calc(100svh - 78px);background:#fff}
.banner-portfolio h1{margin:0 0 25px}
.banner-cards{display:flex;gap:7px;min-height:570px;height:min(66vh,730px)}
.banner-card{flex:1;min-width:0;position:relative;overflow:hidden;cursor:pointer;border-radius:7px;background:#26252a;transition:flex .45s ease,transform .2s ease;isolation:isolate;outline-offset:3px}
.banner-card:before{content:'';position:absolute;inset:0;background-image:var(--card-image);background-size:cover;background-position:center;transition:transform .5s;z-index:-2}
.banner-card:hover:before,.banner-card.expanded:before{transform:scale(1.07)}
.banner-card:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.96),rgba(0,0,0,.08) 65%);z-index:-1}
.banner-card:hover,.banner-card:focus,.banner-card.expanded{flex:2.25}
.banner-card-2{background:linear-gradient(145deg,#9e8169,#31222c)}
.banner-card-3{background:linear-gradient(145deg,#8d9aab,#252d36)}
.banner-card-4{background:linear-gradient(145deg,#8e4837,#231c1d)}
.banner-card-5{background:linear-gradient(145deg,#46667d,#161c29)}
.banner-card-6{background:linear-gradient(145deg,#698c97,#162333)}
.banner-card-body{position:absolute;bottom:0;left:0;right:0;color:white;padding:22px 15px}
.banner-card-index{font-size:11px;letter-spacing:.2em;color:var(--gold)}
.banner-card h2{font-size:clamp(14px,1.25vw,20px);line-height:1.25;margin:10px 0 0;overflow-wrap:break-word}
.banner-card p{font-size:13px;line-height:1.55;max-height:0;opacity:0;overflow:hidden;margin:0;transition:all .35s}
.banner-card:hover p,.banner-card:focus p,.banner-card.expanded p{max-height:170px;opacity:1;margin:12px 0 0}
.banner-card .project-images{display:none}
.banner-caption{font-size:12px;color:#666;margin-top:20px}
/* Contact remains usable, with a restrained burgundy accent */
.contact-panel{border-color:rgba(140,23,58,.25)}
@media(max-width:900px){.banner-resume{grid-template-columns:60% 40%}.banner-resume-text{padding-left:35px}.banner-resume-photo{background-position:58% center}.banner-cards{height:540px;min-height:0}.banner-card-body{padding:14px 10px}.banner-card h2{font-size:14px}}
@media(max-width:700px){.hero{min-height:650px}.hero-copy{max-width:95%}.hero h1{font-size:clamp(48px,12vw,75px)}.banner-resume{display:flex;flex-direction:column}.banner-resume-text{padding:40px 25px}.banner-resume-photo{order:-1;min-height:320px;width:100%;margin:0;clip-path:none;background-position:center 32%}.resume-highlight{grid-template-columns:48px 1fr;gap:16px}.resume-icon{font-size:30px}.banner-portfolio{padding:30px 16px 60px}.banner-cards{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.banner-card{min-height:320px}.banner-card:hover,.banner-card:focus,.banner-card.expanded{flex:1}.banner-card p{max-height:160px;opacity:1;margin-top:8px}.banner-card h2{font-size:18px}}
@media(max-width:430px){.banner-cards{grid-template-columns:1fr}.banner-card{min-height:280px}.banner-resume h1,.banner-portfolio h1{font-size:52px}}

/* HBE portfolio banner: existing banner geometry and typography preserved */
.banner-card-1:before{background-position:center;background-color:#d6d3d1;background-size:cover}

/* Accessible, native navigation for featured Engineering & Research banner. */
.banner-card-1 .banner-card-direct-link{position:absolute;inset:0;display:block;z-index:5;cursor:pointer}
.banner-card-1 .banner-card-direct-link:focus-visible{outline:3px solid #8a304d;outline-offset:-5px}

/* Portfolio: explicit clickable project action; glass-like 3px refractive border */
.banner-card-1 .banner-card-body{z-index:2;pointer-events:none}
.banner-card-1 .banner-open-project{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 4px;padding:11px 12px;border:3px solid rgba(255,255,255,.82);border-radius:9px;color:#fff;text-decoration:none;background:linear-gradient(130deg,rgba(255,255,255,.20),rgba(255,255,255,.035) 40%,rgba(255,255,255,.13) 70%,rgba(255,255,255,.03));box-shadow:inset 1px 1px 0 rgba(255,255,255,.38),0 3px 12px rgba(0,0,0,.28);backdrop-filter:blur(5px) saturate(135%);-webkit-backdrop-filter:blur(5px) saturate(135%);font-size:10px;font-weight:800;letter-spacing:.08em;line-height:1.2;transition:background .2s,transform .2s,border-color .2s;position:relative;z-index:10}
.banner-card-1 .banner-open-project:hover,.banner-card-1 .banner-open-project:focus-visible{background:rgba(151,14,49,.70);border-color:#fff;transform:translateY(-2px);outline-offset:4px}
.banner-card-1 .banner-open-project span{font-size:17px}
@media(max-width:900px){.banner-card-1 .banner-open-project{padding:9px 6px;font-size:9px;letter-spacing:0}}