/* Tight, consistent image sizing */
:root{--bg:#0b0b0c;--panel:#111216;--text:#e8e9ed;--muted:#9aa0aa;--accent:#e11d48;--card:#14151a;--border:#23242a}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--text);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:32px}
.top{position:sticky;top:0;background:rgba(11,11,12,.8);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--border);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.06em}
.nav a{margin-left:18px;color:var(--muted)}
.nav a.btn{color:var(--text)}
.btn{display:inline-block;padding:10px 16px;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.btn.primary{background:var(--accent);border-color:transparent;color:white}
.btn.ghost{background:transparent}

.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 16px}
.hero-media{border-radius:16px;border:1px solid var(--border);overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.4)}
/* Aspect-ratio helpers ensure uniform blocks */
.ratio-16x9{aspect-ratio:16/9}
.ratio-3x2{aspect-ratio:3/2}
.ratio-4x5{aspect-ratio:4/5}
.card{border-radius:12px;border:1px solid var(--border);overflow:hidden;background:var(--card)}
.card img,.hero-media img{width:100%;height:100%;object-fit:cover}

/* Galleries */
.grid.gallery-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

h2{margin:24px 0 10px}
.columns{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.columns>div{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}
.resume{color:var(--muted)}
.contact{background:linear-gradient(180deg,rgba(225,29,72,.08),transparent);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.footer{border-top:1px solid var(--border);background:var(--panel)}
.footer .container{padding:20px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .columns{grid-template-columns:1fr}
  .grid.gallery-3{grid-template-columns:1fr 1fr}
}


/* Fade-in effect for images */
.fade-in {
  opacity: 0;
  transform: scale(1.02);
  animation: fadeIn 1s ease-out forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* Grayscale -> color on hover for selected images */
.bw-hover { filter: grayscale(100%); transition: filter .35s ease; }
.bw-hover:hover { filter: none; }


/* Subtle zoom on hover without layout shift */
.zoom {
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
  transform-origin: center;
  will-change: transform;
}
.zoom:hover {
  transform: scale(1.045);
}
.card, .hero-media, .grid.gallery-3 figure {
  overflow: hidden;
}


/* Reliable zoom: trigger on container hover for Safari */
.zoom { display:block; transform: translateZ(0); transition: transform .35s ease; will-change: transform; }
.card:hover .zoom,
.hero-media:hover .zoom,
.grid.gallery-3 figure:hover .zoom { transform: scale(1.08); }
/* Keep overflow hidden on containers so no layout shift */


#music a { color: var(--accent); font-weight: bold; }
#music a:hover { text-decoration: underline; }