@font-face{font-family:'Matricha';src:url('matricha.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#000;--fg:#f0f0f0;--dim:#888;--dim2:#333;--border:#181818;--accent:#ff2d20;--matricha:'Matricha',sans-serif;--inter:'Inter',sans-serif}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--fg);font-family:var(--inter);-webkit-font-smoothing:antialiased;overflow-x:hidden}

.grid-overlay{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:calc(100%/12) calc(100%/12)}

nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.5rem 4rem;display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,.85);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.04)}
.logo{font-family:var(--matricha);font-size:32px;letter-spacing:.15em;color:var(--fg);text-decoration:none}
.nav-label{font-size:16px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}

.hero{padding:12rem 4rem 6rem}
.hero-label{font-size:16px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:2rem}
h1{font-family:var(--matricha);font-size:96px;line-height:.88;letter-spacing:.05em;font-weight:normal}
.accent{color:var(--accent)}
.hero-sub{font-size:24px;color:var(--dim);max-width:50ch;line-height:1.7;margin-top:2rem;font-weight:400}

.divider{height:1px;background:var(--border);margin:0 4rem}

.cards{padding:4rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:2rem}

.card{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--bg);text-decoration:none;color:var(--fg);transition:all .4s;overflow:hidden}
.card:hover{border-color:var(--dim);transform:translateY(-4px)}
.card-empty{opacity:.4;pointer-events:none}

.card-cover{aspect-ratio:16/9;background:#0a0a0a;position:relative;overflow:hidden}
.card-cover-empty{background:#080808}

.card-body{padding:2rem;display:flex;flex-direction:column;gap:1rem;flex:1}
.card-tag{font-size:16px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.card-title{font-family:var(--matricha);font-size:32px;font-weight:normal;letter-spacing:.03em}
.card-desc{font-size:16px;color:var(--dim);line-height:1.7;font-weight:400}

footer{padding:2rem 4rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
footer span,footer a{font-size:16px;color:var(--dim);letter-spacing:.05em;text-decoration:none}
footer a:hover{color:var(--fg)}

@media(max-width:768px){
  nav{padding:1.5rem}
  .hero{padding:10rem 1.5rem 4rem}
  h1{font-size:64px}
  .hero-sub{font-size:18px}
  .cards{padding:2rem 1.5rem;grid-template-columns:1fr}
  footer{padding:2rem 1.5rem;flex-direction:column;gap:.5rem;align-items:flex-start}
}