:root{
  --ink:#14110D; --ink2:#1B1712; --panel:#211B14;
  --bone:#EAE2D3; --dim:#9A8F77; --faint:#6E654E;
  --brass:#C9A14A; --steel:#8B9AA0;
  --line:rgba(234,226,211,.11); --line2:rgba(234,226,211,.055);
  --serif:"Bodoni Moda",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;}
body{
  background:var(--ink); color:var(--bone);
  font-family:var(--mono); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;opacity:.045;mix-blend-mode:overlay;}

/* masthead */
.masthead{display:flex;align-items:baseline;gap:26px;padding:22px 40px 17px;border-bottom:1px solid var(--line);}
.wordmark{font-family:var(--serif);font-weight:600;font-size:25px;letter-spacing:.16em;}
.wordmark .dot{color:var(--brass);}
.tagline{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);}
.masthead .meta{margin-left:auto;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

/* layout */
.layout{display:grid;grid-template-columns:272px 1fr;}
.roster{border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:calc(100vh - 65px);}
.roster-head{display:flex;flex-direction:column;gap:11px;padding:20px 18px 14px;}
.roster-head span{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);}
#search{width:100%;background:var(--ink2);border:1px solid var(--line);color:var(--bone);font-family:var(--mono);font-size:12px;letter-spacing:.02em;padding:8px 11px;outline:none;transition:border-color .18s ease;}
#search::placeholder{color:var(--faint);}
#search:focus{border-color:var(--brass);}
.roster ul{list-style:none;margin:0;padding:0 0 16px;overflow-y:auto;flex:1;}
.roster ul::-webkit-scrollbar{width:8px;}
.roster ul::-webkit-scrollbar-thumb{background:var(--line);}
.roster li.hidden{display:none;}
.roster li{display:flex;align-items:center;gap:13px;padding:11px 22px;cursor:pointer;border-left:2px solid transparent;transition:background .18s ease,border-color .18s ease;}
.roster li:hover{background:var(--ink2);}
.roster li.active{background:var(--panel);border-left-color:var(--brass);}
.roster .thumb{width:34px;height:45px;object-fit:cover;filter:grayscale(.45) contrast(1.03);background:var(--ink2);}
.roster .r-name{flex:1;font-size:12.5px;letter-spacing:.02em;}
.roster .r-idx{font-family:var(--serif);font-size:18px;color:var(--brass);font-weight:500;}

/* card */
.card{padding:36px 48px 64px;max-width:1000px;}
.card-head{display:flex;gap:32px;align-items:flex-start;}
.portrait{width:154px;height:205px;object-fit:cover;filter:grayscale(.2) contrast(1.04);border:1px solid var(--line);flex:none;}
.headline{flex:1;padding-top:4px;}
.headline .name{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.6vw,52px);line-height:1.0;letter-spacing:-.012em;margin:0 0 10px;}
.headline .desc{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--dim);line-height:1.4;}
.headline .qid{margin-top:12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

.indexbox{flex:none;text-align:right;min-width:168px;border-left:1px solid var(--line);padding-left:26px;}
.indexbox .big{font-family:var(--serif);font-weight:600;font-size:68px;line-height:.9;}
.indexbox .lab{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:8px;}
.subbars{margin-top:18px;display:flex;flex-direction:column;gap:11px;}
.subbar .srow{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:4px;}
.track{height:3px;background:var(--line);position:relative;overflow:hidden;}
.track i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--brass);transition:width 1.1s cubic-bezier(.2,.7,.15,1);}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:34px;}
.stat{padding:18px 22px;border-right:1px solid var(--line2);}
.stat:last-child{border-right:none;}
.stat .v{font-family:var(--serif);font-size:27px;line-height:1;}
.stat .k{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:8px;}

/* sections */
.section{margin-top:40px;}
.section h2{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);font-weight:400;margin:0 0 9px;}

.film{display:grid;grid-template-columns:28px 1fr 104px 104px 150px;align-items:center;gap:16px;padding:13px 8px;border-bottom:1px solid var(--line2);transition:background .15s ease;}
.film:hover{background:var(--ink2);}
.film .rank{font-size:11.5px;color:var(--faint);}
.film .t{font-size:14px;letter-spacing:.01em;}
.film .t .yr{color:var(--dim);}
.film .num{text-align:right;}
.film .num b{font-weight:500;font-size:13.5px;}
.film .num .cap{display:block;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:3px;}
.roicell{}
.roicell .rv{display:flex;align-items:baseline;justify-content:flex-end;gap:5px;}
.roicell .rv b{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--brass);}
.roicell .rv span{font-size:10px;color:var(--faint);letter-spacing:.1em;}
.roicell .track{margin-top:6px;}

/* markets */
.market{display:grid;grid-template-columns:128px 1fr 78px;align-items:center;gap:18px;padding:10px 8px;}
.market .m-lab{font-size:12.5px;letter-spacing:.02em;}
.market .m-track{height:7px;background:var(--line);position:relative;overflow:hidden;}
.market .m-track i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--steel);transition:width 1s cubic-bezier(.2,.7,.15,1);}
.market .m-pct{text-align:right;}
.market .m-pct b{font-family:var(--serif);font-weight:600;font-size:19px;}
.market .m-pct span{display:block;font-size:9px;color:var(--faint);letter-spacing:.06em;margin-top:1px;}

.foot{margin-top:46px;padding-top:16px;border-top:1px solid var(--line);font-size:10.5px;letter-spacing:.06em;color:var(--faint);line-height:1.7;}
.foot b{color:var(--dim);font-weight:500;}

/* load reveal */
.reveal{opacity:0;transform:translateY(9px);animation:rise .7s cubic-bezier(.2,.7,.15,1) forwards;}
@keyframes rise{to{opacity:1;transform:none;}}

@media(max-width:820px){
  .layout{grid-template-columns:1fr;}
  .roster{min-height:auto;border-right:none;border-bottom:1px solid var(--line);}
  .card-head{flex-wrap:wrap;}
  .indexbox{border-left:none;padding-left:0;text-align:left;}
}