:root{
  --bg:#2b2b2b; --panel:#3c3c3c; --slate:#3f5a80; --slate-dark:#2d4263;
  --navy:#1f3354; --slate-light:#7f9cc4; --accent:#f2b84b; --accent-hover:#ffd27a; --light:#dedede; --text:#ffffff; --muted:#c9d1de;
  --radius:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;line-height:1.5}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* scroll fade (opacity is set by the script in index.html) */
.reveal{will-change:opacity,transform}

/* nav */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1rem;background:var(--light);padding:.6rem 1.25rem;box-shadow:0 4px 8px rgba(0,0,0,.35)}
.logo img{width:48px;height:48px;object-fit:contain}
.nav nav{flex:1;display:flex;justify-content:center;gap:clamp(.75rem,6vw,3.5rem)}
.pill{display:inline-block;background:var(--slate);color:#fff;border-radius:var(--radius);padding:.35rem 2.2rem;font-weight:700;text-decoration:none;text-align:center}
.nav .pill:hover{background:var(--slate-dark)}
.nav .pill-accent{background:var(--accent);color:#1d1d1d}
.nav .pill-accent:hover{background:var(--accent-hover)}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:#1d1d1d;font-weight:700;border-radius:999px;padding:.7rem 1.8rem;text-decoration:none;transition:background .2s,transform .2s}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:2px solid var(--slate-light)}
.btn-ghost:hover{background:var(--slate-dark)}
.btn-small{padding:.4rem 1.2rem;font-size:.9rem}
.hero-cta{grid-area:cta;display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}

/* hero */
.hero{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"name photo ." "tag photo ." "cta photo .";align-items:start;gap:1rem 2rem;padding:2rem 1.25rem 2.5rem;max-width:1400px;margin:0 auto}
.pill-name{grid-area:name;justify-self:start;border-radius:var(--radius);font-size:clamp(1.8rem,3vw,2.8rem);padding:.9rem 3rem;margin:0}
.pill-tag{grid-area:tag;justify-self:start;border-radius:var(--radius);text-align:left;max-width:15rem;font-size:clamp(1.1rem,1.6vw,1.5rem);margin:3rem 0 0;padding:1.25rem 1.5rem}
.portrait{grid-area:photo;width:clamp(300px,32vw,520px);border:6px solid #000;background:#111;aspect-ratio:620/830;object-fit:cover}
.rule{height:6px;max-width:700px;margin:1.5rem auto;border-radius:3px;background:#565656}
.skills{text-align:center;font-size:clamp(1.1rem,2.6vw,1.5rem);font-weight:700;margin:0;padding:0 1rem}

/* shared */
.wrap{max-width:1600px;margin:0 auto;padding:1rem 1.25rem}
.pill-title{display:block;width:fit-content;margin:1rem auto;font-size:1.4rem;padding:.2rem 4rem;border-radius:12px}
.pill-wide{display:block;border-radius:8px;background:var(--slate-dark);font-size:1.3rem;padding:.2rem 1rem}
.panel{border-radius:var(--radius);background:var(--slate-dark)}
.tab{margin:0;background:var(--slate);border-radius:var(--radius) var(--radius) 0 0;text-align:center;font-size:1.3rem;padding:.4rem 1rem}
.panel-body{padding:1.25rem 2rem}
.panel-body p{margin:0 0 1rem;font-size:.95rem}
.panel-body p:last-child{margin:0}
.panel-body.center{text-align:center;font-weight:700;padding:1.5rem}

/* about */
.bio{margin-top:1rem;background:var(--slate-dark)}
.bio .tab{width:12rem;text-align:left;padding-left:4.5rem}
.about-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;margin-top:2rem}
.role{background:#27384f}
.role .tab{background:#34496a}
.jams-list{background:var(--navy);overflow:hidden}
.jams-list ul{list-style:none;margin:0;padding:0}
.jams-list li{display:flex;flex-direction:column;align-items:center;padding:.7rem 1rem;background:linear-gradient(var(--slate-dark),var(--navy))}
.jams-list li span,.jam-grid span{font-size:.8rem;color:var(--muted)}

/* tools */
.tools-title{margin-top:2.5rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin:0;padding:1.25rem 0 .5rem}
.chips li{background:var(--navy);border:2px solid var(--slate-light);border-radius:999px;padding:.4rem 1.1rem;font-weight:700;font-size:.9rem}

/* work */
.video{max-width:1150px;margin:0 auto 1rem}
.video-frame{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.video-frame iframe{width:100%;height:100%;border:0;display:block}
.highlights{background:var(--panel);border-radius:40px;padding:1.5rem 2.5rem 3rem;margin:1rem auto;max-width:1150px}
.highlights .pill-wide{background:var(--navy);margin-top:.5rem}
.project h4{text-align:center;font-size:1rem;margin:2rem 0 1rem}
.project-row{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:3rem;align-items:center;max-width:950px;margin:0 auto}
.project-row img,.project-row video{border-radius:14px;width:100%;object-fit:cover}
.project-text{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.project-text p{margin:0}
.project-row .outcome{font-weight:400;color:var(--muted)}
.project-row p{margin:0;font-weight:700;font-size:.95rem}
.highlights .rule{margin:2rem auto 0}

.jams-title{background:var(--navy);max-width:1000px;margin:2rem auto 1.5rem}
.jam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-bottom:2rem}
.jam-grid figure{margin:0;text-align:center}
.jam-link{display:block;text-decoration:none;border-radius:var(--radius);padding:.5rem;transition:background .2s,transform .2s}
.jam-link:hover{background:var(--slate-dark);transform:translateY(-4px)}
.jam-link:hover img{outline:3px solid var(--slate)}
.jam-grid img{width:100%;aspect-ratio:9/8;object-fit:cover;border-radius:var(--radius)}
.jam-grid figcaption{display:flex;flex-direction:column;margin-top:.5rem}

/* contact */
.contact-title{margin:2rem 0 0;background:var(--navy);text-align:center;font-size:1.4rem;padding:.4rem}
.contact-bar{list-style:none;margin:0;padding:1.5rem 1rem;background:var(--light);color:#000;display:flex;justify-content:space-around;flex-wrap:wrap;gap:1rem}
.contact-bar a{display:flex;align-items:center;gap:.6rem;font-size:.8rem;font-weight:700;text-decoration:none}
.contact-bar a:hover{text-decoration:underline}

/* mobile */
@media (max-width:720px){
  .nav .pill{padding:.3rem 1rem}
  .hero{grid-template-columns:1fr;grid-template-areas:"photo" "name" "tag" "cta";justify-items:center;gap:1rem}
  .portrait{width:min(100%,360px)}
  .hero-cta{justify-content:center}
  .nav nav{flex-wrap:wrap;gap:.5rem}
  .pill-name,.pill-tag{justify-self:center;border-radius:var(--radius);max-width:none;margin:0;text-align:center}
  .about-row,.jam-grid{grid-template-columns:1fr}
  .project-row{grid-template-columns:1fr}
  .highlights{padding:1rem 1.25rem 2rem;border-radius:28px}
  .panel-body{padding:1rem 1.25rem}
  .bio .tab{width:100%;text-align:center;padding-left:1rem}
}