@font-face{font-family:'Druk Wide';src:url(/assets/fonts/DrukWide-Bold-Web.woff2) format('woff2');font-weight:700;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
:root{--gold:#C5A059;--goldL:#F4E4BD;--goldD:#8A6C34;--ink:#EDE7DA}
body.cardpage{background:#050507;color:var(--ink);font:14.5px/1.55 Inter,-apple-system,'Segoe UI',sans-serif;
 min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 16px;
 background-image:radial-gradient(1100px 620px at 50% -10%,rgba(197,160,89,.12),transparent 62%)}
.stage{width:100%;max-width:1020px}
.lead{text-align:center;margin-bottom:26px}
.lead .s{font-family:'Druk Wide',sans-serif;font-size:10.5px;letter-spacing:.34em;color:var(--gold)}
.lead h1{font-family:'Druk Wide',Impact,sans-serif;font-size:clamp(20px,3vw,34px);text-transform:uppercase;
 color:#fff;margin:9px 0 8px;line-height:1.05}
.lead p{color:#9a958a;font-size:13.5px;max-width:56ch;margin:0 auto}
.card{position:relative;aspect-ratio:1.586/1;border-radius:16px;transform-style:preserve-3d;
 transition:transform .18s ease-out;cursor:pointer;
 box-shadow:0 34px 90px rgba(0,0,0,.8),0 0 70px rgba(197,160,89,.18)}
.face{position:absolute;inset:0;border-radius:16px;overflow:hidden;backface-visibility:hidden;
 border:1px solid rgba(197,160,89,.55)}
.back{transform:rotateY(180deg);background:linear-gradient(150deg,#14100a,#0a0a0f 55%,#161009)}
.card.flip{transform:rotateY(180deg)}
.sil{position:absolute;inset:0}
.sil img{width:100%;height:100%;object-fit:cover;object-position:22% center}
.veil{position:absolute;inset:0;background:linear-gradient(96deg,rgba(5,5,7,.1) 0%,rgba(5,5,7,.62) 40%,
 rgba(5,5,7,.93) 68%,rgba(5,5,7,.97) 100%)}
.foil{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
 background:linear-gradient(115deg,transparent 34%,rgba(255,243,200,.5) 46%,rgba(197,160,89,.2) 52%,transparent 64%);
 background-size:280% 100%;background-position:120% 0;transition:background-position 1.5s ease}
.card:hover .foil{background-position:-60% 0}
.frame{position:absolute;inset:11px;border:1px solid rgba(197,160,89,.42);border-radius:10px;pointer-events:none}
.frame::before,.frame::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--gold)}
.frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:9px 0 0 0}
.frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-radius:0 0 9px 0}
.body{position:absolute;inset:0;padding:clamp(18px,3.4vw,34px);display:flex;flex-direction:column}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.mark{font-family:'Druk Wide',sans-serif;font-size:clamp(8px,1vw,10px);letter-spacing:.34em;color:var(--gold)}
.state{font-family:'Druk Wide',sans-serif;font-size:clamp(7.5px,.9vw,9px);letter-spacing:.22em;
 color:#8d8878;text-align:right;line-height:1.7}
.mid{margin-top:auto;text-align:right}
.role{font-size:clamp(8px,1vw,10px);letter-spacing:.3em;color:#8d8878;margin-bottom:5px}
.name{font-family:'Druk Wide',Impact,sans-serif;font-size:clamp(20px,3.6vw,42px);text-transform:uppercase;
 line-height:1;background:linear-gradient(180deg,var(--goldL),var(--gold) 50%,var(--goldD));
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;word-break:break-word}
.no{font-family:'Druk Wide',sans-serif;font-size:clamp(10px,1.4vw,15px);letter-spacing:.2em;
 color:var(--goldL);margin-top:7px}
.bot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:clamp(12px,2vw,20px)}
.meta{display:flex;gap:clamp(12px,2.4vw,26px)}
.meta div .l{font-size:clamp(7px,.85vw,8.5px);letter-spacing:.24em;color:#7d7970;text-transform:uppercase}
.meta div .v{font-family:'Druk Wide',sans-serif;font-size:clamp(10px,1.3vw,14px);color:var(--goldL);margin-top:4px}
.qr{width:clamp(74px,11vw,104px);aspect-ratio:1;border-radius:7px;overflow:hidden;flex:none;
 border:2px solid rgba(197,160,89,.6);box-shadow:0 0 22px rgba(197,160,89,.28);background:#F4E4BD;padding:4px}
.qr svg,.qrbig svg{width:100%;height:100%;display:block}
.qr.ghost,.qrbig.ghost{display:flex;align-items:center;justify-content:center;background:rgba(244,228,189,.1);
 border-style:dashed;color:#8d8878;font:700 11px 'Druk Wide',sans-serif;letter-spacing:.2em}
.back .in{position:absolute;inset:0;padding:clamp(18px,3.4vw,34px);display:flex;flex-direction:column;gap:11px}
.back h4{font-family:'Druk Wide',sans-serif;font-size:clamp(9px,1.1vw,11px);letter-spacing:.24em;color:var(--gold)}
.back p{font-size:clamp(10.5px,1.15vw,12.5px);color:#a5a096;line-height:1.55}
.back .qrbig{margin:auto;width:clamp(120px,20vw,180px);aspect-ratio:1;border-radius:9px;overflow:hidden;
 border:2px solid rgba(197,160,89,.6);background:#F4E4BD;padding:6px}
.back .cd{text-align:center;font-family:'Druk Wide',sans-serif;font-size:clamp(10px,1.3vw,14px);
 letter-spacing:.2em;color:var(--goldL)}
.hint{text-align:center;margin-top:20px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#7d7970}
.acts{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.btn{display:inline-block;background:var(--gold);color:#0A0A0F;border:0;border-radius:5px;padding:12px 20px;
 cursor:pointer;font:700 11px 'Druk Wide',sans-serif;letter-spacing:.12em;text-transform:uppercase;
 transition:.2s;text-decoration:none}
.btn:hover{background:var(--goldL)}
.btn.g{background:transparent;color:var(--goldL);border:1px solid rgba(197,160,89,.5)}
.btn.g:hover{background:rgba(197,160,89,.16)}
.foot{margin-top:24px;text-align:center;font-size:11.5px;color:#807b71;line-height:1.6}
.foot b{color:var(--goldL)}
.foot a{color:var(--goldL)}
