/* tapau-archive-v2 */

.tpa{--ink:#050306;--pink-400:#FF6EB2;--pink-500:#FF009D;--pink-600:#D10080;--g400:#20FF19;--g500:#04C400;--g600:#029300;
--p100:#EFEAF6;--p200:#DED7E8;--p300:#C3B9D0;--p500:#7B6D8D;--p600:#615472;--p700:#4B3F59;--p800:#352B40;--p900:#211A2A;--p950:#15101B;
--n0:#fff;--n100:#F2F0F4;--n200:#E5E2E9;--n300:#D1CDD6;--n600:#655C70;--n700:#4C4356;--n900:#1C1622;--ok:#0F7A36;
--fd:"roc-grotesk",sans-serif;--fb:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--pad:48px;
font:400 16px/1.6 var(--fb);color:var(--n700);background:var(--n100);width:100%;overflow-x:clip;padding-bottom:48px;display:flex;flex-direction:column;gap:48px}
.tpa *,.tpa *::before,.tpa *::after{box-sizing:border-box}
.tpa p{margin:0}
.tpa a{text-decoration:none}
.tpa :focus-visible{outline:2px solid var(--pink-500);outline-offset:2px}
.tpa-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tpa-wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--pad)}
.tpa-row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.tpa-row--c{justify-content:center}
.tpa-meta{font-size:12.8px;line-height:1.45;color:var(--n600)}
.tpa .tpa-link{color:var(--n700);font-weight:600;font-size:16px}
.tpa .tpa-link:hover{color:var(--pink-600);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
/* hero */
.tpa-hero{position:relative;min-height:max(240px,30vh);display:flex;overflow:hidden;background:linear-gradient(135deg,var(--p950),var(--p900));color:#fff}
.tpa-hm{position:absolute;inset:0}
.tpa-hm img{width:100%;height:100%;object-fit:cover;display:block}
.tpa-hm--grid{display:grid;grid-template-columns:repeat(var(--c),1fr);grid-template-rows:repeat(var(--r),1fr);gap:4px}
.tpa-hm--grid span{overflow:hidden;background:var(--p800)}
.tpa-hm--blur img{filter:blur(18px) saturate(1.1);transform:scale(1.15)}
.tpa-hm--quote{display:flex;justify-content:flex-end;align-items:flex-start;padding:40px var(--pad) 0}
.tpa-hm--quote div{max-width:440px;text-align:right;font:700 25px/1.3 var(--fd);color:var(--p300)}
.tpa-hm--quote span{display:block;margin-top:8px;font:400 12.8px/1.4 var(--fb);color:var(--p300)}
.tpa-hero__s{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,3,6,.94) 20%,rgba(5,3,6,.45))}
.tpa-hero--quote .tpa-hero__s,.tpa-hero--plain .tpa-hero__s{background:linear-gradient(to top,rgba(5,3,6,.5),rgba(5,3,6,0))}
.tpa-hero__in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding-block:24px 32px}
.tpa-hero__txt{display:flex;flex-direction:column;gap:8px;max-width:720px}
.tpa-eb{font:600 12.8px/1.2 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--pink-400)}
.tpa .tpa-h1{font:700 clamp(40px,4.6vw,60px)/1.05 var(--fd);letter-spacing:-.01em;color:#fff;margin:0;text-wrap:balance}
.tpa-lede{color:var(--p200)}
.tpa-hmeta{font-size:12.8px;color:var(--p200)}
.tpa-back{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 16px;border-radius:0;background:rgba(255,255,255,.12);color:#fff!important;font:600 12.8px/1 var(--fb);white-space:nowrap}
.tpa-back:hover{background:rgba(255,255,255,.22)}
.tpa-search{position:relative;margin-top:8px;max-width:560px;width:100%}
.tpa-search input{width:100%;min-height:48px;padding:0 52px 0 16px;border:1.5px solid var(--n0);border-radius:0;background:var(--n0);color:var(--n900);font:400 16px/1.4 var(--fb)}
.tpa-search input::placeholder{color:var(--n600)}
.tpa-search input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(239,46,170,.45)}
.tpa-search button{position:absolute;right:4px;top:4px;width:40px;height:40px;border:0;border-radius:0;background:transparent;color:var(--n700);cursor:pointer;display:grid;place-items:center}
.tpa-search button:hover{background:var(--n100)}
/* toolbar */
.tpa-main{display:flex;flex-direction:column;gap:24px}
.tpa-bar{display:flex;flex-direction:column;gap:12px}
.tpa-bar__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px}
.tpa-bar__l,.tpa-bar__r{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-width:0}
.tpa-bar__r{gap:8px}
.tpa-count{font-size:12.8px;color:var(--n600);white-space:nowrap}
.tpa-count b{color:var(--n900)}
.tpa-scope,.tpa-fgrp,.tpa-active{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tpa-fgrp__l{font-size:12.8px;color:var(--n600);min-width:64px}
.tpa .tpa-chipbtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 16px;border:1px solid var(--p300);border-radius:0;background:var(--n0);color:var(--n700);font:600 12.8px/1 var(--fb);cursor:pointer;list-style:none;white-space:nowrap}
.tpa .tpa-chipbtn::-webkit-details-marker{display:none}
.tpa .tpa-chipbtn:hover{border-color:var(--n900);color:var(--n900)}
.tpa .tpa-chipbtn.is-on{background:var(--p900);border-color:var(--p900);color:#fff}
.tpa-pop{position:relative}
.tpa-pop__p{position:absolute;z-index:20;top:calc(100% + 8px);left:0;width:max-content;max-width:min(560px,calc(100vw - 32px));background:var(--n0);border:1px solid var(--n200);border-radius:0;padding:16px;box-shadow:0 12px 32px rgba(21,16,27,.14);display:flex;flex-direction:column;gap:12px}
.tpa-bar__r .tpa-pop__p{left:auto;right:0}
.tpa-pop__p--list{padding:8px;gap:0;min-width:200px}
.tpa .tpa-pop__o{display:block;padding:10px 12px;border-radius:0;color:var(--n700);font-size:16px}
.tpa .tpa-pop__o:hover{background:var(--n100);color:var(--n900)}
.tpa .tpa-pop__o.is-on{font-weight:700;color:var(--n900)}
.tpa-mob{display:none}
/* grid + card */
.tpa-grid{display:grid;gap:24px}
.tpa-grid--c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tpa-grid--c3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* vote (light construction) */
.tpa .tpa-vote,.tpa .tpa-votewrap .tapau-vote-btn,.tpa .tpa-votewrap .tapau-login-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;font:600 12.8px/1 var(--fb);background:var(--g400);color:var(--ink);border:1.5px solid var(--ink);border-radius:0;box-shadow:-2px 3px 0 var(--ink);margin:0 0 3px 2px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .12s,box-shadow .12s,transform .12s}
.tpa .tpa-vote:hover,.tpa .tpa-votewrap .tapau-vote-btn:hover{background:var(--g500);box-shadow:none;transform:translate(-2px,3px)}
.tpa .tpa-vote:active,.tpa .tpa-votewrap .tapau-vote-btn:active{background:var(--g600)}
.tpa .tpa-votewrap .tapau-vote-btn[disabled],.tpa .tpa-votewrap .tapau-vote-btn.voted,.tpa .tpa-votewrap .tapau-vote-btn.is-voted{background:var(--p200);color:var(--p800);border-color:transparent;box-shadow:none;transform:none;cursor:default}
.tpa-vcount{font-weight:600}
.tpa-closed{font-size:12.8px;color:var(--n600)}
/* buttons */
.tpa .tpa-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 24px;font:600 16px/1 var(--fb);border:2px solid var(--ink);border-radius:0;background:var(--g400);color:var(--ink);box-shadow:-4px 4px 0 var(--ink);margin:0 0 4px 4px;cursor:pointer;white-space:nowrap;transition:background .12s,box-shadow .12s,transform .12s}
.tpa .tpa-btn:hover{background:var(--g500);color:var(--ink);box-shadow:none;transform:translate(-4px,4px)}
.tpa .tpa-btn:active{background:var(--g600)}
.tpa .tpa-btn--s{background:var(--p500);color:#fff;border-color:var(--p800)}
.tpa .tpa-btn--s:hover{background:var(--p600);color:#fff}
.tpa .tpa-btn--t{background:var(--p200);color:var(--p800);border-color:transparent;box-shadow:none;margin:0}
.tpa .tpa-btn--t:hover{background:var(--p300);color:var(--ink);transform:none}
.tpa .tpa-btn--t:active{background:var(--p600);color:var(--p200)}
.tpa .tpa-btn--sm{min-height:32px;padding:0 14px;font-size:12.8px;border-radius:0}
.tpa .tpa-band .tpa-btn--t{background:rgba(255,255,255,.12);color:#fff}
.tpa .tpa-band .tpa-btn--t:hover{background:rgba(255,255,255,.22);color:#fff}
/* more + empty */
.tpa-more{display:flex;flex-direction:column;align-items:center;gap:8px}
.tpa-first{text-align:center}
.tpa-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.tpa-pager .tpa-chipbtn{min-width:36px;justify-content:center;text-decoration:none}
.tpa-pager__gap{color:var(--n600);padding:0 4px}
.tpa-empty{border:1px dashed var(--p300);border-radius:0;background:var(--n0);padding:40px 24px;text-align:center;display:flex;flex-direction:column;gap:8px;color:var(--n600)}
.tpa-empty__t{font:700 20px/1.3 var(--fd);color:var(--n900)}
.tpa-empty .tpa-row{margin-top:12px}
/* keep exploring */
.tpa-xz{background:var(--p100);border-block:1px solid var(--n200);padding-block:48px}
.tpa .tpa-h2{font:700 clamp(26px,2.6vw,32px)/1.2 var(--fd);color:var(--n900);margin:0 0 24px}
.tpa-xgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
/* band */
.tpa-band{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;align-items:center;background:var(--p900);color:#fff;border-radius:0;padding:24px 32px}
.tpa-band__t{font:700 25px/1.25 var(--fd);color:#fff}
.tpa-band__s{font-size:16px;color:var(--p200)}
/* responsive */
@media (max-width:1024px){.tpa{--pad:32px}.tpa-grid--c4{grid-template-columns:repeat(3,minmax(0,1fr))}.tpa-grid--c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
.tpa{--pad:16px;gap:32px}
.tpa-lede{display:none}
.tpa-hm--grid{grid-template-columns:repeat(var(--cm),1fr);grid-template-rows:repeat(var(--rm),1fr)}
.tpa-hm--grid span.dk{display:none}
.tpa-hm--quote div{display:none}
.tpa-hero__in{padding-block:16px 24px}
.tpa-grid{gap:12px}
.tpa-grid--c4{grid-template-columns:repeat(2,minmax(0,1fr))}
.tpa-grid--c3{grid-template-columns:minmax(0,1fr)}
.tpa-dsk{display:none}
.tpa-mob{display:block}
.tpa-bar__r .tpa-pop.tpa-mob .tpa-pop__p{right:auto;left:0}
.tpa-bar__row{flex-wrap:nowrap}
.tpa-xz{padding-block:32px}
.tpa-xgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
.tpa-xgrid::-webkit-scrollbar{display:none}
.tpa-xgrid>.tp-cq{flex:0 0 72%;scroll-snap-align:start}
.tpa-band{padding:24px}
}
/* chart archive */
.tpa-wk{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px;align-items:start}
.tpa-wk__main{display:flex;flex-direction:column;gap:24px;min-width:0}
.tpa-side{position:sticky;top:128px}
.admin-bar .tpa-side{top:160px}
.tpa-side__stack{display:flex;flex-direction:column;gap:24px}
.tpa .tpa-h2--sm{font-size:25px;margin-bottom:16px}
.tpa-weekpick{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tpa .tpa-chipbtn--static{cursor:default}
.tpa .tpa-chipbtn--dis{opacity:.45;cursor:not-allowed}
.tpa-pill{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:0;font:600 12.8px/1 var(--fb);border:1px solid var(--p300);background:var(--n0);color:var(--n900)}
.tpa-pill--live{background:#DCFAE6;border-color:var(--ok);color:var(--ok)}
.tpa-rows{display:flex;flex-direction:column;gap:8px}
.tpa-rowcard{position:relative;display:flex;align-items:center;gap:16px;padding:12px;background:var(--n0);border:1px solid var(--n200);border-radius:0}
.tpa-rowcard:hover{border-color:var(--p300)}
.tpa-rowcard__lead{flex:0 0 36px;display:flex;flex-direction:column;align-items:center;gap:4px}
.tpa-rk{font:700 31.25px/1 var(--fd);color:var(--pink-600)}
.tpa-tr{font:600 12.8px/1 var(--fb);color:var(--n600)}
.tpa-tr.up{color:var(--ok)}.tpa-tr.nw{color:var(--pink-600)}
.tpa-rowcard__m{position:relative;flex:0 0 25%}
.tpa-rowcard__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tpa-run{font-size:12.8px;color:var(--n600)}
.tpa-run b{color:var(--n900)}
.tpa-rowcard .tpa-card__a{margin:0;padding:0}
.tpa-hm--week{display:flex;justify-content:flex-end;align-items:center;padding-inline:var(--pad);overflow:hidden}
.tpa-hm--week span{font:700 clamp(120px,16vw,220px)/1 var(--fd);color:rgba(255,255,255,.07);letter-spacing:-.02em}
.tpa-shelves{gap:48px}
@media (max-width:1024px){.tpa-wk{grid-template-columns:minmax(0,1fr)}.tpa-side{position:static}.tpa-side__stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.tpa-rowcard{gap:10px;padding:8px;flex-wrap:wrap}.tpa-rowcard__lead{flex-basis:28px}.tpa-rk{font-size:25px}.tpa-rowcard__b{flex:1 1 0}.tpa-rowcard .tpa-card__a{flex:0 0 100%;padding-left:38px}.tpa-rowcard__m{flex-basis:30%}.tpa-side__stack{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.tpa *{transition:none!important}}

