@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500&display=swap');

:root {
  --bg:      #0a0a0a;
  --surface: #111111;
  --card:    #161616;
  --border:  #2a2a2a;
  --accent:  #c9a84c;
  --accent2: #e8c97a;
  --text:    #f0ede8;
  --muted:   #6e6e6e;
  --radius:  4px;
  --shadow:  0 12px 40px rgba(0,0,0,0.7);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:15px; min-height:100vh; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
ul { list-style:none; }
button { font-family:'Inter',sans-serif; cursor:pointer; }

.navbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:60px; display:flex; align-items:center; justify-content:space-between;
  padding:0 3rem;
  background:rgba(10,10,10,0.96);
  border-bottom:1px solid var(--border);
}
.navbar__logo {
  font-family:'Playfair Display',serif;
  font-size:1.5rem; font-weight:700; letter-spacing:2px;
  color:var(--accent);
}
.navbar__links { display:flex; gap:2.5rem; }
.navbar__links a { font-size:0.78rem; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); transition:color 0.2s; }
.navbar__links a:hover, .navbar__links a.active { color:var(--text); }
.navbar__actions { display:flex; gap:0.75rem; align-items:center; }

.btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.55rem 1.4rem; border-radius:var(--radius); font-size:0.75rem; font-weight:500; letter-spacing:1px; text-transform:uppercase; border:none; transition:all 0.2s; cursor:pointer; }
.btn--primary { background:var(--accent); color:#0a0a0a; }
.btn--primary:hover { background:var(--accent2); }
.btn--ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn--lg { padding:0.8rem 2rem; font-size:0.82rem; }

.section { padding:4rem 3rem 2rem; }
.section__header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2rem; }
.section__title { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:600; letter-spacing:0.5px; }
.section__title span { color:var(--accent); }
.section__link { font-size:0.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); transition:color 0.2s; }
.section__link:hover { color:var(--accent); }

.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; }

.content-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform 0.3s,box-shadow 0.3s; }
.content-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.content-card__body { padding:0.8rem; }
.content-card__title { font-size:0.84rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:0.3rem; }
.content-card__meta { display:flex; justify-content:space-between; font-size:0.7rem; color:var(--muted); }
.content-card__rating { color:var(--accent); font-weight:600; }

.card-thumb { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#111; }
.card-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s; }
.content-card:hover .card-thumb img { transform:scale(1.04); }
.card-thumb__overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,10,10,0.85),transparent 60%); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.3s; }
.content-card:hover .card-thumb__overlay { opacity:1; }
.play-btn { width:52px; height:52px; border-radius:50%; background:rgba(201,168,76,0.9); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform 0.2s,background 0.2s; }
.play-btn:hover { transform:scale(1.1); background:var(--accent2); }
.play-btn svg { fill:#0a0a0a; margin-left:3px; }

.footer { background:var(--surface); border-top:1px solid var(--border); padding:2.5rem 3rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:4rem; }
.footer__logo { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:700; letter-spacing:2px; color:var(--accent); }
.footer__links { display:flex; gap:2rem; }
.footer__links a { font-size:0.72rem; letter-spacing:1px; text-transform:uppercase; color:var(--muted); transition:color 0.2s; }
.footer__links a:hover { color:var(--text); }
.footer__copy { font-size:0.72rem; color:var(--muted); letter-spacing:0.5px; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease,transform 0.6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

@media (max-width:768px) {
  .navbar { padding:0 1.2rem; }
  .navbar__links { display:none; }
  .section { padding:2.5rem 1.2rem 1rem; }
  .footer { flex-direction:column; padding:1.5rem 1.2rem; }
  .card-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}