:root{
  --hu-blue:#003e7e;
  --hu-blue-ink:#06294f;
  --hu-gold:#caa24b;
  --bg-light:#f6fbff;
  --bg-dark:#0b1420;
  --ink:#0c1b2a;
  --ink-light:#dbe9f6;
  --accent:#2eaadc;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg-light);line-height:1.65}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px;
  backdrop-filter:saturate(150%) blur(8px);
  background:color-mix(in srgb, white 75%, transparent);
  border-bottom:2px solid color-mix(in srgb, var(--hu-blue) 12%, white);
}
.logo.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--hu-blue-ink); text-decoration:none;}
.logo.brand img{height:28px; width:auto; filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
nav a{margin-left:16px; text-decoration:none; color:var(--ink); opacity:.85}
nav a:hover{opacity:1}
.sound-btn{margin-left:12px; font-size:18px; padding:8px 10px; border-radius:12px; border:1px solid color-mix(in srgb, var(--hu-blue) 30%, #e4eef6); background:#fff; cursor:pointer}
.sound-btn[aria-pressed="false"]{opacity:.65}

/* Panels */
.panel{min-height:100svh; display:flex; align-items:center}
.panel--light{background:var(--bg-light); color:var(--ink)}
.panel--dark {
  background-color: var(--hu-blue);
  color: var(--ink-light);
  position: relative;
  isolation: isolate;
}
.panel--dark::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("img/brand/hu-pattern.png");
  background-repeat: repeat;
  background-size: 200px auto;
  background-attachment: fixed;
  opacity: 0.12;
}
.panel--dark > .container{ position: relative; z-index: 1; }

.container{width:min(1100px,92vw); margin-inline:auto; padding:56px 0}

/* Intro */
.intro-grid{display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:center}
#intro{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.88), rgba(255,255,255,.94)),
    url("img/intro/hampton_campus.jpg") center/cover no-repeat;
}
.headshot{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:50%; border:6px solid #fff; box-shadow:0 10px 30px rgba(0,0,0,.12)}
.intro-copy h1{font-size:clamp(32px,4vw,46px); margin:0 0 6px}
.muted{opacity:.8; margin-top:0}
.contact{list-style:none; padding:0; margin:14px 0 22px}
.contact li{margin:4px 0}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.card{background:rgba(255,255,255,.9); color:inherit; border-radius:var(--radius); border:1px solid #e6eef5; padding:16px; box-shadow:0 10px 24px rgba(0,0,0,.06)}
.panel--dark .card{background:rgba(255,255,255,.06); border-color:#213040}
.card img{width:100%; height:160px; object-fit:cover; border-radius:10px}
.card--large .project-img,
.card--large .project-gif{
  height: auto;
  display: block;
  object-fit: contain;
}
#certs .cards{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){#certs .cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){#certs .cards{grid-template-columns:1fr}}
#certs .card img{
  width:100%;
  height:auto;
  object-fit:contain;
  max-height:360px;
  display:block;
}
.card h3{margin:10px 0 6px}
.btn{display:inline-block; margin-right:8px; margin-top:8px; padding:8px 12px; border-radius:10px; background:var(--hu-blue); color:#fff; text-decoration:none; font-weight:600}
.btn--outline{background:transparent; color:inherit; border:1px solid currentColor}

/* Activities timeline */
.rope{position:relative; padding:40px 0}
.rope__line{position:absolute; left:50%; top:0; bottom:0; width:6px; border-radius:6px; background:linear-gradient(to bottom, var(--hu-gold), var(--hu-blue))}
.rope__node{width:min(520px, 90%); margin:38px 0; position:relative; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.85); border:2px solid rgba(0,0,0,0.85); border-radius:var(--radius); padding:12px; box-shadow: 0 8px 18px rgba(0,0,0,0.06);} 
.rope__node:nth-child(odd){left:calc(50% - 22px)}
.rope__node:nth-child(even){left:calc(50% + 22px)}
.rope__node img{
  width:100%;
  height:auto;
  max-height:360px;
  object-fit:contain;
  object-position:center;
  border-radius:10px;
  display:block;
}
.rope__node figcaption{margin:8px 4px 2px}

/* Water wipes (SVG) */
.water-mask{
  position:relative; height:18svh; overflow:hidden;
  color: color-mix(in srgb, var(--accent) 60%, var(--hu-blue));
  background: transparent;
}
.water-mask svg{width:100%; height:100%; display:block; filter:url(#turbulence)}
.mask-rect{width:100%; height:100%; fill: currentColor}
.water-mask[data-direction="down"]{clip-path: inset(0 0 100% 0)}
.water-mask[data-direction="up"]{clip-path: inset(100% 0 0 0)}
.water-mask[data-direction="left"]{clip-path: inset(0 100% 0 0)}
.water-mask[data-direction="right"]{clip-path: inset(0 0 0 100%)}

/* Projects: HUCart layout */
#projects .cards{grid-template-columns:1fr}
.card--large{
  display:flex; flex-direction:column; align-items:stretch; gap:10px; min-height:420px; padding:10px 12px;
}
.card--large .project-images{
  display:flex; gap:18px; align-items:center; justify-content:flex-start; flex-wrap:nowrap; margin-bottom:6px;
  max-width:1100px; margin-left:auto; margin-right:auto; width:100%; padding-top:6px;
}
.card--large .project-img{flex:0 0 40%; width:40%; min-width:240px; object-fit:contain; align-self:center; max-height:520px}
.card--large .project-gif{flex:1 1 60%; width:60%; min-width:240px; object-fit:contain; max-height:520px; align-self:center}
.card--large .project-media{display:flex; flex-direction:row; gap:12px; width:100%; overflow:hidden; align-items:stretch}
.card--large .project-video{width:calc(50% - 6px); max-width:calc(50% - 6px); height:auto; max-height:440px; object-fit:contain; border-radius:12px; display:block}

.project-banner{
  width:100%; min-height:180px; border-radius:12px; margin-bottom:6px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--hu-blue), var(--accent));
  color:#fff; font-size:1.4rem; font-weight:800; letter-spacing:.5px;
}

/* Loader */
#loader{position:fixed; inset:0; display:grid; place-items:center; z-index:9999; background:linear-gradient(180deg, var(--hu-blue) 0%, #051228 100%); color:#fff; text-align:center}
.loader-logo img{width:min(120px,28vw)}
.loader-wave{width:min(420px,70vw); height:18px; margin:18px auto 8px; background:linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.85), rgba(255,255,255,.2)); background-size:200% 100%; border-radius:999px; animation:wave 1.4s linear infinite}
@keyframes wave{0%{background-position:0 0}100%{background-position:200% 0}}
.loader-text{opacity:.85; letter-spacing:.4px}
#loader.is-done{opacity:0; pointer-events:none; transition:opacity .6s ease}

/* Responsive */
@media (max-width: 820px){
  .intro-grid{grid-template-columns:1fr; text-align:center}
  .card--horizontal{flex-direction:column}
  .card--horizontal .project-images{flex:0 0 auto; flex-wrap:wrap}
  .project-img{width:200px}
  .project-gif{max-width:100%}
  .card--large{ padding:12px; }
  .card--large .project-images{ flex-wrap:wrap; justify-content:center; gap:12px; }
  .card--large .project-img{ width:160px; flex:0 0 160px; }
  .card--large .project-gif{ width:100%; max-width:100%; flex:1 1 100%; max-height:320px; }
  .card--large .project-media{ width:100%; }
  .card--large .project-media{ flex-direction:column; gap:8px }
  .card--large .project-video{ width:100%; max-width:100%; max-height:240px; }
}
@media (prefers-reduced-motion: reduce){ .water-mask{height:10svh} }

/* Wave bars */
:root{ --wave-color: color-mix(in srgb, var(--accent) 60%, var(--hu-blue)); }
.wave-mask{ position: relative; height: 18svh; overflow: hidden; background: transparent; }
@media (max-width: 820px){ .wave-mask{ height: 12svh; } }
@media (prefers-reduced-motion: reduce){ .wave-mask{ height: 10svh; } }
.wave{
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 160%;
  background-repeat: repeat-x; background-size: 1200px 100%;
  will-change: transform, background-position; filter: saturate(110%);
}
.wave{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path fill='%232eaadc' d='M0,60 C150,120 350,0 600,60 C850,120 1050,0 1200,60 L1200,120 L0,120 Z'/></svg>"); }
.wave{ filter: drop-shadow(0 -1px 0 rgba(255,255,255,.2)); }
.wave path{ fill: var(--wave-color); }
.wave1{ opacity:.75; animation: waveSlide 12s linear infinite, waveBob 3.8s ease-in-out infinite; }
.wave2{ opacity:.55; animation: waveSlide 18s linear infinite reverse, waveBob 4.6s ease-in-out infinite; transform: translateY(6px); }
.wave3{ opacity:.35; animation: waveSlide 28s linear infinite, waveBob 5.4s ease-in-out infinite; transform: translateY(12px); }
.wave::before{
  content: "";
  position: absolute; left: -10%; right: -10%; height: 160%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path fill='%232eaadc' d='M0,60 C150,120 350,0 600,60 C850,120 1050,0 1200,60 L1200,120 L0,120 Z'/></svg>");
  background-repeat: repeat-x; background-size: 1200px 100%;
  transform: scaleY(-1); pointer-events: none;
  filter: drop-shadow(0 -1px 0 rgba(255,255,255,.2));
}
.wave1::before{ opacity: .45; animation: waveSlide 14s linear infinite; }
.wave2::before{ opacity: .32; animation: waveSlide 20s linear infinite reverse; transform: scaleY(-1) translateY(6px); }
.wave3::before{ opacity: .22; animation: waveSlide 30s linear infinite; transform: scaleY(-1) translateY(12px); }
.wave-mask[data-direction="up"] .wave::before{ bottom: -40%; top: auto; }
.wave-mask:not([data-direction="up"]) .wave::before{ top: -40%; bottom: auto; }
@keyframes waveSlide{ 0%{ background-position-x: 0 } 100%{ background-position-x: -1200px } }
@keyframes waveBob{ 0%,100%{ transform: translateY(var(--bob,0)) } 50%{ transform: translateY(calc(var(--bob,0) - 8px)) } }
.wave-mask[data-direction="up"] .wave{ bottom: auto; top: -40%; transform-origin: top; }
.wave-mask[data-direction="up"] .wave1{ --bob: 0px; }
.wave-mask[data-direction="up"] .wave2{ --bob: 6px; }
.wave-mask[data-direction="up"] .wave3{ --bob: 12px; }