@font-face{font-family:"Kaushan Script";src:url(fonts/KaushanScript-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Anton";src:url(fonts/Anton-400.woff2) format("woff2");font-display:swap}
:root{--ink:#101010;--ink2:#1c1c1d;--pink:#f14083;--gold:#efbb4f;--cream:#fff7f2}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink)}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--cream);min-height:100vh;
 background:radial-gradient(120% 60% at 50% -10%,rgba(241,64,131,.38),transparent 60%),radial-gradient(90% 40% at 100% 100%,rgba(239,187,79,.16),transparent 60%),var(--ink);
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:460px;margin:0 auto;padding:34px 18px calc(28px + env(safe-area-inset-bottom))}
.hero{text-align:center}
.ring{width:176px;height:176px;margin:0 auto;border-radius:50%;padding:4px;background:conic-gradient(from 210deg,var(--pink),var(--gold),var(--pink),var(--gold),var(--pink));box-shadow:0 10px 40px rgba(241,64,131,.35)}
.me{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 14%;border:3px solid var(--ink)}
h1{font-family:"Kaushan Script",cursive;font-weight:400;font-size:clamp(1.8rem,9vw,2.3rem);line-height:1.1;margin-top:16px;color:#fff;text-shadow:0 2px 18px rgba(241,64,131,.55)}
.tag{margin-top:6px;font-size:.92rem;font-weight:600;letter-spacing:.02em;color:var(--gold)}
.tag .dot{color:var(--pink);margin:0 4px}
.social{display:flex;justify-content:center;gap:14px;margin-top:14px}
.social a{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:#fff;border:1px solid rgba(239,187,79,.5);background:rgba(255,255,255,.04);transition:.2s}
.social a:hover{background:var(--pink);border-color:var(--pink)}
.social svg{width:20px;height:20px}
.kicker{font-family:Anton,Impact,sans-serif;letter-spacing:.22em;text-align:center;font-size:.85rem;color:rgba(255,247,242,.7);margin:26px 0 14px}
.kicker span{color:var(--pink);letter-spacing:0}
.links{list-style:none;display:grid;gap:16px}
.card{display:block;text-decoration:none;color:inherit;border-radius:22px;overflow:hidden;background:var(--ink2);border:1px solid rgba(239,187,79,.28);box-shadow:0 8px 26px rgba(0,0,0,.45);transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover,.card:focus-visible{transform:translateY(-2px);border-color:var(--pink);box-shadow:0 12px 32px rgba(241,64,131,.32)}
.card:active{transform:scale(.985)}
.card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.media{position:relative;display:block;aspect-ratio:1200/630;background:#222}
.media img{display:block;width:100%;height:100%;object-fit:cover}
.num{position:absolute;top:10px;left:10px;font-family:Anton,Impact,sans-serif;font-size:.8rem;letter-spacing:.08em;color:var(--ink);background:var(--gold);border-radius:999px;padding:3px 9px}
.tile{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
 background:radial-gradient(80% 90% at 30% 20%,rgba(255,255,255,.35),transparent 60%),linear-gradient(135deg,#f14083 0%,#ff7aa9 45%,#efbb4f 100%)}
.tile-script{font-family:"Kaushan Script",cursive;font-size:2.6rem;color:#fff;text-shadow:0 3px 14px rgba(16,16,16,.35);line-height:1}
.tile-anton{font-family:Anton,Impact,sans-serif;letter-spacing:.45em;font-size:1.05rem;color:var(--ink);margin-top:8px;padding-left:.45em}
.txt{display:flex;flex-direction:column;gap:3px;padding:13px 16px 15px}
.label{font-weight:800;font-size:1.08rem;line-height:1.25;color:#fff}
.dom{font-size:.86rem;font-weight:600;color:var(--gold);display:flex;align-items:center;gap:6px}
.arrow{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--pink);color:#fff;font-size:.95rem}
footer{text-align:center;margin-top:30px;font-size:.82rem;letter-spacing:.04em;color:rgba(255,247,242,.72)}
.spark{color:var(--gold)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.media img.pos-low{object-position:50% 92%}

.media.sq{aspect-ratio:1/1}
.media.tsbs{aspect-ratio:800/1016}
.media.cbt{aspect-ratio:800/1198}
.media.inf{aspect-ratio:800/751}
.media.wk{aspect-ratio:800/600}
.media.pgp{aspect-ratio:800/600}
.pgp-txt{position:absolute;left:0;right:0;bottom:9%;display:flex;flex-direction:column;align-items:center}
.pgp-txt .tile-script{font-size:3rem}
.pgp-txt .tile-anton{color:#efbb4f;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.media.jc{aspect-ratio:800/720}
.media.bst{aspect-ratio:1/1}
.jtc{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);white-space:nowrap;background:linear-gradient(135deg,#f14083,#ff5fa0);color:#fff;font-family:Anton,Impact,sans-serif;letter-spacing:.08em;font-size:1.15rem;padding:.55em 1.2em;border:2px solid #efbb4f;border-radius:999px;box-shadow:0 0 0 3px rgba(239,187,79,.25),0 8px 22px rgba(241,64,131,.55);animation:jtcp 2.2s ease-in-out infinite;z-index:2}
@keyframes jtcp{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06);box-shadow:0 0 0 6px rgba(239,187,79,.35),0 10px 28px rgba(241,64,131,.7)}}
@media (prefers-reduced-motion:reduce){.jtc{animation:none}}
.media.bst{aspect-ratio:800/1220}
.media.bst .jtc{bottom:37%}

/* 12:25 GHMH card */
.media.ghmh{aspect-ratio:800/1100}