:root{--g:#c9a24b;--r:#9b111e}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{background:#050505;color:#cfc8b8;font:300 17px/1.8 Inter,sans-serif;overflow-x:hidden}
#bg{position:fixed;inset:0;z-index:-4;background:radial-gradient(circle at 50% 0,#2a0a0e,#050505 70%);background-size:cover;background-position:center;animation:zm 40s ease-in-out infinite alternate}
#bg[style*=url]{filter:grayscale(.8) brightness(.4)}
@keyframes zm{to{transform:scale(1.12)}}
.shade{position:fixed;inset:0;z-index:-3;background:radial-gradient(ellipse at 35% 45%,#0000,#000 90%),linear-gradient(#000c,#0000 30%,#000d)}
#cut{position:fixed;right:0;bottom:0;height:92vh;max-width:60vw;object-fit:contain;object-position:bottom right;z-index:-2;animation:rise 1.4s both;-webkit-mask-image:linear-gradient(to top,#0000,#000 18%);mask-image:linear-gradient(to top,#0000,#000 18%)}
#cut[hidden]{display:none}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}
.grain{position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.09;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.85'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");animation:gr .5s steps(4) infinite}
@keyframes gr{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}}
#glow{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(#c9a24b22,#0000 70%)}
nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:24px;padding:14px 5vw;background:linear-gradient(#000e,#0000);backdrop-filter:blur(3px)}
nav div{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none}
nav a{color:#9c9484;text-decoration:none;font:500 12px Cinzel;letter-spacing:.25em;text-transform:uppercase;white-space:nowrap;transition:.3s}
nav a:hover,nav a.on{color:var(--g);text-shadow:0 0 14px var(--g)}
nav .logo{font-size:24px;color:var(--g);font-weight:800;letter-spacing:.2em}
#app{transition:.3s}#app.out{opacity:0;transform:translateY(14px)}
.wrap{min-height:100vh;padding:130px 6vw 150px;max-width:1200px}.wrap>*{max-width:640px}
.eyebrow{font:500 12px Cinzel;letter-spacing:.5em;color:var(--r)}
h1{font:800 clamp(34px,6vw,64px)/1.1 Cinzel;color:#f2ead8;margin:10px 0;letter-spacing:.06em}
h1::after{content:"";display:block;width:90px;height:2px;margin:18px 0;background:linear-gradient(90deg,var(--g),#0000)}
h1.big{font-size:clamp(80px,22vw,220px);line-height:.9;letter-spacing:.1em;color:var(--g);text-shadow:0 0 60px #c9a24b44}h1.big::after{display:none}
.glitch{position:relative}.glitch::before{content:attr(data-t);position:absolute;left:3px;top:10px;color:var(--r);clip-path:inset(0 0 60% 0);opacity:.7;animation:gl 3s infinite}
@keyframes gl{0%,90%,100%{transform:none}92%{transform:translate(-6px,2px)}95%{transform:translate(6px,-2px)}}
h2{font:500 clamp(15px,3vw,22px) Cinzel;letter-spacing:.4em;color:#f2ead8;margin-bottom:20px}
p{margin-bottom:1.2em}
#rq{font:italic 500 clamp(18px,3vw,26px)/1.5 Cinzel;color:var(--g);border-left:2px solid var(--r);padding-left:18px;margin:34px 0;min-height:80px;transition:opacity .5s}
.btn{display:inline-block;margin:6px 10px 6px 0;padding:12px 26px;border:1px solid var(--g);color:var(--g);text-decoration:none;font:500 12px Cinzel;letter-spacing:.3em;transition:.3s}
.btn:hover{background:var(--g);color:#000;box-shadow:0 0 30px #c9a24b66}
.wrap>.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;max-width:none;margin-top:30px}
.card{padding:24px;background:#0c0c0cb8;border:1px solid #2a2418;font:italic 500 18px/1.5 Cinzel;color:#e8dfc8;transition:.4s}
.card:hover{border-color:var(--g);box-shadow:0 10px 40px #000}
.card::before{content:"“";display:block;font-size:48px;color:var(--r);line-height:.5}
.grid img{width:100%;height:280px;object-fit:cover;filter:grayscale(1);border:1px solid #2a2418;transition:.5s}.grid img:hover{filter:none}
.trk{display:block;width:100%;padding:16px 20px;margin:8px 0;background:#0c0c0cb8;border:1px solid #2a2418;color:#e8dfc8;font:500 15px Cinzel;cursor:pointer;text-align:left;transition:.3s}
.trk:hover{border-color:var(--g);padding-left:32px}
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s,transform 1s}.rv.in{opacity:1;transform:none}
#pl{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;gap:14px;align-items:center;padding:12px 5vw;background:#000d;border-top:1px solid #2a2418;backdrop-filter:blur(8px);font:500 12px Cinzel;letter-spacing:.15em}
#pp{width:38px;height:38px;border-radius:50%;border:1px solid var(--g);background:0;color:var(--g);cursor:pointer}
#pbar{flex:1;height:4px;background:#222;cursor:pointer}#pb{display:block;height:100%;width:0;background:var(--g)}
@media(max-width:800px){#cut{max-width:100vw;opacity:.35}.wrap>*{max-width:none}}
