@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Inter:wght@400;500&display=swap');

:root{
  --paper:#f7f5f0;
  --ink:#1f1d1a;
  --ink-soft:#6b665e;
  --line:#e0dcd2;
  --accent:#2f4d3a;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

header{
  padding:5rem 1.5rem 3rem;
  text-align:center;
}
header h1{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:clamp(2.5rem,7vw,4.5rem);
  margin:0;
  letter-spacing:-0.02em;
}
header h1 a{
  text-decoration:none;
}

nav{
  display:flex;
  justify-content:center;
  gap:2rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--line);
  margin:0 1.5rem;
  flex-wrap:wrap;
}
nav a{
  text-decoration:none;
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:4px;
  border-bottom:2px solid transparent;
}
nav a:hover, nav a.active{ color:var(--ink); border-color:var(--accent); }

section{
  max-width:1000px;
  margin:0 auto;
  padding:4rem 1.5rem;
}
section h2{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.6rem;
  margin-bottom:2rem;
}

/* Photos / videos grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.5rem;
}
figure{
  margin:0;
  break-inside:avoid;
}
figure img, figure video{
  width:100%;
  display:block;
  border-radius:2px;
  background:#000;
}
figcaption{
  margin-top:0.6rem;
}
figcaption .title{
  font-weight:500;
  font-size:0.95rem;
}
figcaption .caption{
  color:var(--ink-soft);
  font-size:0.85rem;
  margin-top:2px;
}

/* Music list */
.track{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  padding:1.25rem 0;
  border-bottom:1px solid var(--line);
}
.track:last-child{ border-bottom:none; }
.track .title{
  font-weight:500;
  font-size:1.05rem;
}
.track .caption{
  color:var(--ink-soft);
  font-size:0.85rem;
}
audio{
  width:100%;
  height:36px;
}

.empty{
  color:var(--ink-soft);
  font-size:0.9rem;
  font-style:italic;
}

footer{
  text-align:center;
  padding:3rem 1.5rem 4rem;
  color:var(--ink-soft);
  font-size:0.8rem;
}