/* styles.css */
:root{
  --bg:#07080b;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.09);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --line:rgba(255,255,255,.10);
  --accent:rgba(234, 195, 120, .95);
  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --radius:26px;
  --radius2:18px;
  --max:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1000px 700px at 18% 0%, rgba(234,195,120,.10), transparent 55%),
    radial-gradient(900px 600px at 92% 15%, rgba(120,170,255,.10), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing:.15px;
}

a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:28px 18px 42px}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:14px;
}
.brand{display:flex; align-items:baseline; gap:10px}
.brand .name{
  font-family: Fraunces, serif;
  font-weight:650;
  letter-spacing:.6px;
  font-size:18px;
}
.brand .tag{color:var(--muted); font-size:13px}

.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.pill{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  padding:10px 12px;
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
}
.pill:hover{background:rgba(255,255,255,.06); color:var(--text)}

.hero{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.08);
  min-height:420px;
}

.hero .bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(.92) contrast(.95) brightness(.92);
  transform:scale(1.03);
}

.hero .fade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.06) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.55) 100%);
}

.hero .grain{
  position:absolute; inset:0;
  opacity:.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events:none;
}

.hero .content{
  position:relative;
  padding:34px 28px;
  max-width:660px;
}

.kicker{
  font-size:12px;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  display:flex; align-items:center; gap:10px;
}
.kicker:before{
  content:"";
  width:34px; height:1px;
  background:rgba(255,255,255,.25);
}

h1{
  margin:12px 0 12px;
  font-family: Fraunces, serif;
  font-size:54px;
  line-height:1.00;
  letter-spacing:-.8px;
  font-weight:750;
}

.sub{
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
  max-width:60ch;
}
.sub strong{color:rgba(255,255,255,.90)}

.cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}

.btn{
  border-radius:999px;
  padding:12px 14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:14px;
}
.btn:hover{background:rgba(255,255,255,.08)}

.micro{
  margin-top:14px;
  color:rgba(255,255,255,.55);
  font-size:13px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.micro a{border-bottom:1px solid rgba(255,255,255,.20); padding-bottom:2px}
.micro a:hover{border-bottom-color:rgba(255,255,255,.45); color:var(--text)}

.grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  margin-top:18px;
}

.card{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:var(--radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  overflow:hidden;
}

.card .hd{
  padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.card .hd .title{
  font-size:12px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:rgba(255,255,255,.70);
}
.card .hd .hint{
  color:rgba(255,255,255,.55);
  font-size:12px;
}
.card .bd{padding:16px 18px 18px}

.tiles{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}

.tile{
  display:block;
  border-radius:var(--radius2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.tile:hover{
  transform: translateY(-2px);
  background:rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}

.imgwrap{
  height:170px;
  background:#000;
}
.imgwrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.95) contrast(.98);
}

.tile .meta{padding:12px 12px 14px}
.tile .meta .name{
  font-family: Fraunces, serif;
  font-weight:650;
  margin:0 0 6px;
  letter-spacing:-.2px;
}
.tile .meta .desc{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.note{
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}

.smalllinks{
  margin-top:10px;
  display:flex; gap:10px; flex-wrap:wrap;
  color:rgba(255,255,255,.78);
  align-items:center;
}
.smalllinks .label{color:rgba(255,255,255,.55)}
.smalllinks a{
  color:rgba(255,255,255,.80);
  border-bottom:1px solid rgba(255,255,255,.20);
  padding-bottom:2px;
}
.smalllinks a:hover{color:var(--text); border-bottom-color:rgba(255,255,255,.40)}

.footer{
  margin-top:20px;
  display:flex; align-items:center; justify-content:space-between;
  color:rgba(255,255,255,.50);
  font-size:12px;
}

/* album page */
.album-hero{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
}
.album-hero .frame{
  position:relative;
  aspect-ratio: 16 / 10;
  background:#000;
}
.album-hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.95) contrast(.98);
}
.album-hero .cap{
  padding:16px 18px 18px;
  border-top:1px solid rgba(255,255,255,.08);
}
.album-hero .cap h2{
  margin:0 0 6px;
  font-family: Fraunces, serif;
  font-size:26px;
  letter-spacing:-.3px;
}
.album-hero .cap p{margin:0; color:var(--muted); line-height:1.6}

.album-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:14px 0 0;
}
.album-row .hint{color:rgba(255,255,255,.55); font-size:12px}

.controls{display:flex; gap:8px; flex-wrap:wrap}
.controls button{
  cursor:pointer;
  border-radius:999px;
  padding:10px 12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.86);
  font-size:13px;
}
.controls button:hover{background:rgba(255,255,255,.08)}
.controls button.primary{
  background:rgba(234,195,120,.18);
  border-color:rgba(234,195,120,.35);
}

/* videos */
.video-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.video{
  border-radius:var(--radius2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.video video{width:100%; display:block; background:#000}
.video .vmeta{padding:10px 12px; color:var(--muted); font-size:13px}

/* responsive */
@media (max-width: 920px){
  .grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  h1{font-size:44px}
}