html{scroll-behavior:smooth}
.container{width:min(1200px, 92vw); margin-inline:auto}
.section{padding: min(12vh, 120px) 0}
.section--tight{padding: min(8vh, 80px) 0}
.grid{display:grid; gap:24px}
.btn{display:inline-flex; align-items:center; gap:.5rem; border:1px solid currentColor; padding:.7rem 1.1rem; border-radius:999px; text-decoration:none}
.btn:active{transform:scale(.98)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
img.cover{width:100%; height:100%; object-fit:cover; display:block}

.header{position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid #eee}
.header__inner{display:flex; align-items:center; justify-content:space-between; height:72px; padding-inline:20px}
.header nav a{margin-left:20px; text-decoration:none; color:#0b0b0b; opacity:.8}
.header nav a:hover{opacity:1}

.hero{min-height:100svh; display:grid; place-items:center; position:relative}
.hero__inner{text-align:center}
.hero__subtitle{opacity:.7; margin-top:10px}
.scroll-cue{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); opacity:.7}

.projects{display:grid; gap:24px}
@media (min-width: 900px){
  .projects{grid-template-columns:repeat(3, 1fr)}
}
.project-card{position:relative; overflow:hidden; border-radius:18px}
.project-card img{transition: transform .5s ease}
.project-card:hover img{transform:scale(1.02)}
.project-card__label{position:absolute; inset:auto 16px 16px 16px; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.3)}

.proj-hero{position:relative}
.proj-hero .title{position:absolute; left:50%; bottom:6%; transform:translateX(-50%); color:#fff; text-align:center; text-shadow:0 1px 10px rgba(0,0,0,.35)}
.media-full{width:min(1400px, 96vw); margin-inline:auto; overflow:hidden; border-radius:18px}
.media-rail{display:grid; gap:18px}
@media (min-width:900px){ .media-rail{grid-template-columns: 1fr 1fr} }
.meta{display:grid; gap:8px; margin-top:8px; opacity:.85}

.lab-grid{display:grid; gap:18px}
@media (min-width: 900px){
  .lab-grid{grid-template-columns:repeat(3, 1fr)}
}
.card{border:1px solid #eee; border-radius:18px; overflow:hidden; display:flex; flex-direction:column}
.card__body{padding:14px 16px; display:grid; gap:10px}
.copy-btn{display:inline-flex; align-items:center; gap:.5rem; border:1px solid currentColor; padding:.5rem .9rem; border-radius:999px; background:transparent}

.footer{border-top:1px solid #eee}
.footer__grid{display:grid; gap:18px}
@media (min-width:900px){
  .footer__grid{grid-template-columns: 2fr 1fr 1fr}
}
.footer a{text-decoration:none; color:inherit; opacity:.8}
.footer a:hover{opacity:1}