@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;1,9..144,400&family=IBM+Plex+Mono:wght@400;500&family=Outfit:wght@400;500&display=swap');
:root{--felt:#12100e;--ink:#1b1612;--cream:#f3ead6;--gold:#c6a15b;--gold2:#e4c98a;--rule:rgba(198,161,91,.35);--muted:#8a8173;--dem:#2a3f5f;--gop:#7a3428;--serif:"Fraunces",serif;--sans:"Outfit",sans-serif;--mono:"IBM Plex Mono",monospace}
*{box-sizing:border-box;margin:0}body{background:radial-gradient(ellipse at top,#221d17,var(--felt) 70%);color:var(--cream);font-family:var(--sans);min-height:100vh}
a{color:inherit;text-decoration:none}
.top{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;border-bottom:1px solid var(--rule)}
.brand{font-family:var(--serif);font-size:22px;color:var(--gold2)}.brand small{display:block;font:500 10px var(--mono);letter-spacing:2px;color:var(--gold);text-transform:uppercase}
.meta{font:12px var(--mono);color:var(--muted)}
.kick{font:500 12px var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
h1{font-family:var(--serif);font-weight:500;line-height:1.05}h1 em{color:var(--gold2)}
.lede{color:#d8ccb4;line-height:1.6}
.src{font:12px var(--mono);color:var(--muted)}
.btn{display:block;border:1px solid var(--gold);border-radius:14px;padding:22px 28px;text-align:center}
.btn b{display:block;font:500 30px var(--serif);color:var(--gold2)}.btn span{font:12px var(--mono);color:var(--muted)}
.btn.fill{background:var(--gold);color:var(--ink)}.btn.fill b{color:var(--ink)}.btn.fill span{color:#4a3d28}
.q{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--rule);border-radius:10px;font-size:14px}
.q i{width:10px;height:10px;border-radius:50%;display:inline-block}.r i{background:#b5523f}.d i{background:#4f6f9e}
.foot{text-align:center;padding:28px;font:12px var(--mono);color:var(--muted);border-top:1px solid var(--rule)}

/* Option B */

main{max-width:1180px;margin:0 auto;padding:60px 32px;display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center}
h1{font-size:60px;margin:16px 0}.lede{font-size:17px;margin-bottom:30px}
.pack{position:relative;height:440px}.c{position:absolute;left:50%;top:20px;width:220px;height:308px;margin-left:-110px;border-radius:14px;border:2px solid var(--gold);box-shadow:0 18px 40px rgba(0,0,0,.5);padding:14px;transform-origin:50% 120%;background:var(--cream);color:var(--ink)}
.c .ph{height:170px;border-radius:8px;background:linear-gradient(135deg,#cfc3aa,#a99878)}.c h4{font:500 18px var(--serif);margin:10px 0 2px}.c p{font:11px var(--mono);color:#6b5f4c}
.c1{transform:rotate(-18deg)}.c2{transform:rotate(-6deg)}.c3{transform:rotate(6deg)}
.c4{transform:rotate(18deg);background:linear-gradient(125deg,#f6d9a0,#b9e4e0 30%,#e2b9e8 55%,#f3e0a8 80%);}
.c4 .ph{background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,255,255,.1))}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.btn.holo{background:linear-gradient(120deg,#e4c98a,#bfe3dc,#dcc0e6,#e4c98a);color:var(--ink);border:none}.btn.holo b{color:var(--ink)}.btn.holo span{color:#3d3428}
.ql{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:700px){main{grid-template-columns:1fr;padding:30px 20px;gap:10px}.pack{height:330px;order:-1;transform:scale(.75);margin:-30px 0 -40px}h1{font-size:40px}}

.top nav{display:flex;gap:18px;align-items:center}.top nav a:hover,.foot a:hover{color:var(--gold2)}
.q{justify-content:space-between}.q span{display:flex;align-items:center;gap:10px}.q em{font:normal 12px var(--mono);color:var(--muted)}
.q:hover,.btn:hover{border-color:var(--gold2);filter:brightness(1.05)}
.foot a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:700px){.top{flex-wrap:wrap;gap:10px;padding:16px 20px}.top nav{gap:14px}.top nav span{display:none}.pack{margin:-30px 0 -10px}}

/* real card fan */
.c{padding:12px;display:flex;flex-direction:column}
.c .ph{overflow:hidden;height:186px;background:#cfc3aa}.c .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.c4 .ph{background:#cfc3aa}
.band{display:flex;justify-content:space-between;margin-top:8px;padding:4px 7px;font:500 9px var(--mono);letter-spacing:1px;text-transform:uppercase;color:#f3ead6;border-radius:3px}
.band.D{background:var(--dem)}.band.R{background:var(--gop)}
.c h4{font:500 22px var(--serif);margin:8px 0 0}.c p{margin-top:2px}
@media(max-width:700px){.top{flex-wrap:nowrap;padding:14px 16px;gap:8px}.brand{font-size:18px;white-space:nowrap}.brand small{font-size:8px;letter-spacing:1.5px}
.top nav{gap:10px;font-size:11px;white-space:nowrap}.top nav span{display:inline}}
@media(max-width:360px){.top nav{font-size:10px;gap:8px}}
/* spread the fan so every card shows */
.c1{transform:translateX(-120px) rotate(-14deg)}.c2{transform:translateX(-40px) translateY(-6px) rotate(-5deg)}
.c3{transform:translateX(40px) translateY(-6px) rotate(5deg)}.c4{transform:translateX(120px) rotate(14deg)}
.c{transform-origin:50% 100%}
@media(max-width:700px){.pack{transform:scale(.62);margin:-60px -40px -70px;height:420px}
.top{padding:12px 14px;gap:6px}.brand{font-size:16px}.brand small{font-size:7px;letter-spacing:1px}.top nav{font-size:10px;gap:8px}}
@media(max-width:700px){.pack{margin:-70px -40px -120px}}