:root { --bg:#09070f; --ink:#f5f3fa; --muted:#a39fb3; --line:rgba(255,255,255,.12); }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,-apple-system,Helvetica,Arial,sans-serif; line-height:1.5; overflow:hidden; position:relative; }
.glow { position:fixed; width:60vmax; height:60vmax; border-radius:50%; filter:blur(90px); opacity:.35; pointer-events:none; }
.g1 { background:#ff2e93; top:-30vmax; right:-20vmax; animation:drift 14s ease-in-out infinite alternate; }
.g2 { background:#22e1ff; bottom:-38vmax; left:-22vmax; opacity:.22; animation:drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform:translate(4vmax,3vmax) scale(1.08); } }
.page { position:relative; z-index:1; height:100vh; height:100dvh; max-width:1280px; margin:0 auto; padding:clamp(1rem,3.5vh,2.5rem) 1.5rem clamp(.6rem,2vh,1.2rem); display:grid; grid-template-rows:auto 1fr auto; gap:clamp(.8rem,2.5vh,1.8rem); }
header { align-self:start; }
.eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
h1 { font-size:clamp(2.6rem,min(9vw,13vh),6.5rem); font-weight:800; letter-spacing:-.05em; line-height:.92; margin:.5rem 0 .7rem; }
h1 em { font-style:normal; display:inline-block; padding-right:.12em; margin-right:-.12em; background:linear-gradient(90deg,#ff2e93,#ffc83d 55%,#22e1ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
header p { color:var(--muted); font-size:clamp(.95rem,2vh,1.15rem); margin:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.7rem,1.5vw,1.3rem); min-height:0; }
.card { container-type:inline-size; position:relative; display:flex; align-items:flex-end; border-radius:18px; overflow:hidden; min-height:0; color:inherit; text-decoration:none; border:1px solid var(--line); background:#14101e; transition:transform .3s, border-color .3s, box-shadow .3s; }
.card:hover, .card:focus-visible { transform:translateY(-6px); border-color:rgba(255,255,255,.35); box-shadow:0 18px 50px rgba(0,0,0,.55); outline:none; }
.card-art { position:absolute; inset:0; background-size:cover; filter:saturate(1.15) brightness(1.12); transition:transform .6s; }
.card:hover .card-art { transform:scale(1.07); }
.card::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(9,7,15,.96) 8%,rgba(9,7,15,.55) 45%,rgba(9,7,15,0) 75%); }
.card-body { position:relative; z-index:1; padding:clamp(1rem,2.4vh,1.6rem); }
.card-kicker { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block; }
.card-kicker b { color:var(--ink); margin-right:.6rem; }
.card h2 { margin:.35rem 0; font-size:clamp(2.2rem,min(4.6vw,7vh),4rem); line-height:1; }
.card p { margin:0 0 .9rem; color:#cfcbdc; font-size:clamp(.85rem,1.8vh,1rem); max-width:380px; }
.card-go { font-weight:700; font-size:.9rem; border-bottom:2px solid var(--ink); padding-bottom:2px; }
.card-go i { font-style:normal; display:inline-block; transition:transform .2s; }
.card:hover .card-go i { transform:translateX(5px); }
/* each project's title keeps its own personality */
.card.theme-space h2 { color:#ff8f7e; letter-spacing:-.02em; font-weight:800; }
.card.theme-music h2 { font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; letter-spacing:.02em; font-size:clamp(2.8rem,min(5.6vw,8.5vh),4.8rem);
  background:linear-gradient(90deg,#ff2e93,#ffc83d 55%,#22e1ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.card.theme-chillhop h2 { font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:800; letter-spacing:-.02em; color:#ffb347; font-size:min(9.2cqw,3.2rem); }
footer { color:var(--muted); font-size:.8rem; }
@media (max-width:820px) {
    .page { padding-left:1rem; padding-right:1rem; }
  .cards { grid-template-columns:1fr; grid-template-rows:repeat(3,1fr); }
  .card p { display:none; }
  .card h2 { font-size:clamp(1.8rem,5vh,2.6rem); }
  .card.theme-music h2 { font-size:clamp(2.1rem,6vh,3rem); }
  .card-body { padding:.8rem 1rem; }
}
@media (max-height:480px) { body { overflow:auto; } .page { height:auto; min-height:100vh; } .cards { min-height:300px; } }
@media (prefers-reduced-motion:reduce) { .glow { animation:none; } }

.chips { position:absolute; top:clamp(1rem,3.5vh,2.5rem); right:1.5rem; display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; max-width:45%; }
.chips span { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.45rem .8rem; border:1px solid var(--line); border-radius:99px; background:rgba(255,255,255,.05); backdrop-filter:blur(6px); }
@media (max-width:820px) { .chips { display:none; } }