/* The members' hub (/members). Built on the site's own colors (site.css), so it follows
   the admin's accent and the light / dark theme. */

.muted{color:var(--muted)}
.small{font-size:13px}
.btn .mi{margin-left:-2px}
.btn-line{background:transparent; color:var(--ink); border:1px solid var(--line-2); padding:10px 19px}
.btn-line:hover{background:var(--surface-2); filter:none}
.btn-sm.btn-line{padding:7px 15px}
.linkbtn{all:unset; cursor:pointer; color:var(--muted); font-size:13.5px; font-weight:500; text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}
.linkbtn.bad:hover{color:#dc2626}
.linkbtn:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.iconbtn{display:inline-grid; place-items:center; width:34px; height:34px; flex:none; border-radius:9px; border:0; background:transparent; color:var(--muted); cursor:pointer; text-decoration:none}
.iconbtn:hover{background:var(--surface-2); color:var(--ink)}
.mi{flex:none}

/* ---------- landing ---------- */
.mhero{border-bottom:1px solid var(--line); background:
  radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--paper)}
.mhero-in{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:56px; align-items:center; padding-top:72px; padding-bottom:72px}
.mhero h1{font-family:var(--display); font-weight:700; font-size:clamp(32px,4.6vw,54px); line-height:1.06; letter-spacing:-.03em; margin:0 0 20px; max-width:16ch}
.mhero .lede{max-width:56ch}
.mnote{display:flex; gap:9px; align-items:center; margin:24px 0 0; padding:11px 14px; border-radius:var(--r-sm); background:var(--accent-soft); color:var(--ink); font-size:14.5px; border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); max-width:56ch}
.mnote .mi{color:var(--accent)}
.mnote.bad{background:color-mix(in srgb, #dc2626 10%, var(--surface)); border-color:color-mix(in srgb, #dc2626 35%, transparent)}
.mjoin{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:28px 26px 24px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column}
.mjoin-k{margin:0 0 6px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.mjoin-price{margin:0; font-family:var(--display); font-size:38px; font-weight:700; letter-spacing:-.03em; line-height:1.1}
.mjoin-alt{margin:2px 0 20px; color:var(--muted); font-size:14.5px}
.mjoin-go{justify-content:center; padding:13px 20px; font-size:15px}
.mjoin-year{margin:12px 0 0; text-align:center; font-size:14px; font-weight:600; color:var(--accent-ink); text-decoration:none}
.mjoin-year:hover{text-decoration:underline}
.mjoin-note{margin:14px 0 0; font-size:13px; color:var(--muted); text-align:center; line-height:1.5}
.mjoin-or{display:flex; align-items:center; gap:12px; margin:22px 0 14px; color:var(--muted); font-size:13px}
.mjoin-or::before,.mjoin-or::after{content:""; flex:1; height:1px; background:var(--line)}
.mjoin-in{justify-content:center}

.msection{padding-top:64px}
.msection-tight{padding-top:40px}
.mperks{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.mperk{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 20px; box-shadow:var(--shadow)}
.mperk h2{font-family:var(--display); font-size:17px; letter-spacing:-.02em; margin:14px 0 8px; line-height:1.25}
.mperk p{margin:0; font-size:14px; color:var(--ink-2); line-height:1.55}
.mperk-ic{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent)}
.mlibcount{display:flex; flex-wrap:wrap; gap:14px; padding-top:24px}
.mlibcount div{display:flex; align-items:center; gap:10px; padding:14px 18px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink-2)}
.mlibcount .mi{color:var(--accent)}
.mlibcount b{font-family:var(--display); font-size:22px; color:var(--ink)}
.mfaq-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 48px; padding-top:20px}
.mfaq h3{font-size:16px; margin:16px 0 6px; font-family:var(--display); letter-spacing:-.015em}
.mfaq p{margin:0; color:var(--ink-2); font-size:14.5px}
.mfine,.mfaq .mfine{margin:34px 0 0; font-size:13.5px; color:var(--muted); max-width:72ch}
.mfine a{color:var(--accent-ink)}

/* ---------- lapsed ---------- */
.mlapsed{padding-top:90px; padding-bottom:40px; max-width:760px}
.mlapsed h1{font-family:var(--display); font-size:clamp(30px,4vw,44px); letter-spacing:-.028em; margin:14px 0 16px; line-height:1.08}
.mlapsed .kicker{margin:22px 0 0}
.mlapsed-go{display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 0}
.mlapsed-out{margin-top:20px}

/* ---------- dashboard ---------- */
.mtop{border-bottom:1px solid var(--line); background:
  radial-gradient(700px 300px at 92% -40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--paper)}
.mtop-in{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:48px; padding-bottom:26px}
.mtop h1{font-family:var(--display); font-size:clamp(28px,3.6vw,42px); letter-spacing:-.028em; margin:0; line-height:1.08}
.mtop .kicker{margin-bottom:12px}
.macct{display:flex; flex-direction:column; align-items:flex-end; gap:8px; font-size:14px}
.macct-who{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; color:var(--ink-2)}
.macct-who b{font-weight:600; word-break:break-all}
.macct-go{display:flex; gap:18px; align-items:center}
.macct-go a{color:var(--accent-ink); font-weight:600; text-decoration:none; font-size:13.5px}
.macct-go a:hover{text-decoration:underline}
.macct-go form{margin:0}
.mpill{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:99px; background:var(--accent-soft); color:var(--accent-ink); white-space:nowrap}
.mtabs{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none}
.mtabs::-webkit-scrollbar{display:none}
.mtabs a{display:inline-flex; align-items:center; gap:8px; padding:12px 14px 13px; font-size:14px; font-weight:600; color:var(--ink-2); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap}
.mtabs a:hover{color:var(--ink); border-bottom-color:var(--accent)}
.mtabs .mi{color:var(--muted)}
.msub h2{font-family:var(--display); font-size:20px; letter-spacing:-.02em; margin:0 0 16px}
.mempty{margin:22px 0 0; padding:22px; border:1px dashed var(--line-2); border-radius:var(--r); color:var(--ink-2); font-size:14.5px; max-width:80ch}
.mfilter{display:flex; gap:8px; flex-wrap:wrap}
.mfilter .chip{display:inline-flex; align-items:center; gap:6px}
.mfilter .chip .n{font-size:12px; opacity:.6}
.mfilter .chip[aria-pressed="true"] .mi{color:var(--paper)}

.mgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding-top:24px}
.mgrid-sm{grid-template-columns:repeat(4,1fr); gap:18px}
.mrow{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.mcard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease}
.mcard:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.mcard[hidden]{display:none}
.mcard-shot{position:relative; display:block; aspect-ratio:16/9; background:var(--surface-2); overflow:hidden}
.mcard-shot img{width:100%; height:100%; object-fit:cover}
.mcard-ph{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted)}
.mtag{position:absolute; top:10px; left:10px; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:99px; color:#fff; background:var(--accent)}
.mtag.early{background:#1f6f4a}
.mcard-body{padding:15px 16px 12px; display:flex; flex-direction:column; gap:5px; flex:1}
.mcard-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.mcard h3{margin:0; font-family:var(--display); font-size:17px; letter-spacing:-.02em; line-height:1.25}
.mcard h3 a{text-decoration:none}
.mcard h3 a:hover{text-decoration:underline}
.mcard-sub{margin:0; font-size:12.5px; color:var(--muted)}
.mcard-note{margin:4px 0 0; font-size:13.5px; color:var(--ink-2); line-height:1.5}
.mcard-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 16px 15px}
.mcard-host{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.star{all:unset; cursor:pointer; display:grid; place-items:center; width:32px; height:32px; margin:-6px -8px 0 0; border-radius:8px; color:var(--line-2); flex:none}
.star:hover{color:var(--muted); background:var(--surface-2)}
.star[aria-pressed="true"]{color:#e0a100}
.star[aria-pressed="true"] svg{fill:currentColor}
.star:focus-visible{outline:2px solid var(--accent)}

.msaves{display:grid; gap:16px; padding-top:24px}
.msave{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.msave header{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 18px}
.msave-g{display:flex; gap:14px; align-items:center}
.msave-g img{width:72px; height:40px; object-fit:cover; border-radius:6px; background:var(--surface-2)}
.msave h3{margin:0; font-family:var(--display); font-size:17px; letter-spacing:-.02em}
.msave header p{margin:2px 0 0; font-size:13px; color:var(--muted)}
.msave-acts{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.mslots{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.mslots li{display:grid; grid-template-columns:32px minmax(0,1fr) auto 34px; gap:12px; align-items:center; padding:9px 12px 9px 18px; border-top:1px solid var(--line)}
.mslots li:first-child{border-top:0}
.mslot-n{display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:var(--surface-2); font-size:12.5px; font-weight:700; color:var(--ink-2)}
.mslot-t{min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mslot-t span{color:var(--muted)}
.mslot-m{font-size:12.5px; color:var(--muted); white-space:nowrap}

.mlibtabs{padding-top:24px}
.mlib{padding-top:20px}
.malbum{display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); margin-bottom:16px}
.malbum-art{aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--surface-2); display:grid; place-items:center; color:var(--muted)}
.malbum-art img{width:100%; height:100%; object-fit:cover}
.malbum h3{margin:2px 0 4px; font-family:var(--display); font-size:20px; letter-spacing:-.02em}
.malbum .muted{margin:0 0 10px}
.mtracks{list-style:none; margin:0; padding:0; counter-reset:t}
.mtracks li{display:grid; grid-template-columns:34px minmax(0,1fr) 34px; gap:8px; align-items:center; padding:3px 0; border-top:1px solid var(--line)}
.mtracks li:first-child{border-top:0}
.mtrack-t{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mtracks li.on .mtrack-t{color:var(--accent-ink); font-weight:600}
.mtracks li.on .mplay{color:var(--accent)}
.mwalls{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.mwall{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.mwall-img{display:grid; place-items:center; aspect-ratio:16/10; background:var(--surface-2); color:var(--muted); overflow:hidden}
.mwall-img img{width:100%; height:100%; object-fit:cover}
.mwall figcaption{display:grid; grid-template-columns:minmax(0,1fr) 34px; grid-template-rows:auto auto; column-gap:8px; padding:11px 10px 11px 14px; align-items:center}
.mwall figcaption b{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mwall figcaption span{grid-row:2; font-size:12.5px; color:var(--muted)}
.mwall figcaption .iconbtn{grid-row:1 / 3; grid-column:2}
.mfiles{display:grid; gap:12px}
.mfiles-models{grid-template-columns:repeat(2,1fr); gap:16px}
.mfile{display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:16px; align-items:center; padding:12px 16px 12px 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.mfiles-models .mfile{grid-template-columns:120px minmax(0,1fr); grid-template-rows:auto auto}
.mfiles-models .mfile-art{grid-row:1 / 3; width:120px; height:120px}
.mfiles-models .mfile-acts{grid-column:2; justify-content:flex-start}
.mfile-art{width:96px; height:72px; border-radius:8px; overflow:hidden; background:var(--surface-2); display:grid; place-items:center; color:var(--muted)}
.mfile-art img{width:100%; height:100%; object-fit:cover}
.mfile h3{margin:0 0 3px; font-size:15.5px; font-family:var(--display); letter-spacing:-.015em}
.mfile .muted{margin:0}
.mfile-acts{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}

/* the soundtrack player, docked at the bottom */
.mplayer{position:fixed; left:0; right:0; bottom:0; z-index:60; background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line); box-shadow:0 -10px 30px -18px rgba(0,0,0,.4)}
.mplayer[hidden]{display:none}
.mplayer-in{display:flex; align-items:center; gap:14px; min-height:64px}
.mplayer-pp{width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff}
.mplayer-pp:hover{background:var(--accent); color:#fff; filter:brightness(1.08)}
.mplayer-t{display:flex; flex-direction:column; min-width:0; width:240px; line-height:1.3}
.mplayer-t b{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mplayer-t span{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mplayer-time,.mplayer-dur{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; width:40px; text-align:center}
.mplayer-seek{flex:1; accent-color:var(--accent); min-width:60px}
body.has-player .foot2{padding-bottom:80px}

/* the 3D model viewer */
.m3d{border:1px solid var(--line); border-radius:16px; padding:0; background:var(--surface); color:var(--ink); width:min(940px, calc(100vw - 32px)); box-shadow:var(--shadow-lg); overflow:hidden}
.m3d::backdrop{background:rgba(6,8,10,.62)}
.m3d-head{display:flex; justify-content:space-between; align-items:center; padding:10px 10px 10px 18px; border-bottom:1px solid var(--line)}
.m3d-head b{font-family:var(--display); font-size:16px}
.m3d canvas{display:block; width:100%; height:auto; aspect-ratio:900/620; background:radial-gradient(circle at 50% 40%, var(--surface-2), var(--paper)); cursor:grab; touch-action:none}
.m3d canvas:active{cursor:grabbing}
.m3d-hint{margin:0; padding:9px 18px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--line)}

@media (max-width:1100px){
  .mperks{grid-template-columns:repeat(3,1fr)}
  .mgrid-sm,.mrow{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .mhero-in{grid-template-columns:1fr; gap:36px; padding-top:48px; padding-bottom:48px}
  .mjoin{max-width:440px}
  .mgrid,.mwalls{grid-template-columns:repeat(2,1fr)}
  .mgrid-sm,.mrow{grid-template-columns:repeat(2,1fr)}
  .mfiles-models{grid-template-columns:1fr}
  .mplayer-t{width:150px}
}
@media (max-width:640px){
  .wrap{padding-left:16px; padding-right:16px}
  .mperks{grid-template-columns:1fr 1fr; gap:12px}
  .mperk{padding:16px}
  .mfaq-grid{grid-template-columns:1fr}
  .macct{align-items:flex-start}
  .macct-who{justify-content:flex-start}
  .mtop-name{display:none}
  .mgrid,.mrow,.mwalls{grid-template-columns:1fr}
  .mgrid-sm{grid-template-columns:1fr 1fr; gap:12px}
  .mgrid-sm .mcard-host{display:none}
  .mgrid-sm .mcard-body{padding:11px 12px 8px}
  .mgrid-sm .mcard-foot{padding:0 12px 12px}
  .mgrid-sm .mcard h3{font-size:15px}
  .mrow{grid-auto-flow:column; grid-auto-columns:78%; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px}
  .mrow .mcard{scroll-snap-align:start}
  .malbum{grid-template-columns:1fr; gap:14px; padding:14px}
  .malbum-art{width:120px}
  .mfile{grid-template-columns:64px minmax(0,1fr); padding:10px}
  .mfile-art{width:64px; height:64px}
  .mfile-acts{grid-column:1 / -1; justify-content:flex-start}
  .mfiles-models .mfile{grid-template-columns:84px minmax(0,1fr)}
  .mfiles-models .mfile-art{width:84px; height:84px}
  .mslots li{grid-template-columns:28px minmax(0,1fr) 34px; padding-left:12px}
  .mslot-m{grid-column:2; grid-row:2; white-space:normal}
  .mslots li .iconbtn{grid-column:3; grid-row:1 / 3}
  .mplayer-time,.mplayer-dur{display:none}
  .mplayer-t{width:auto; flex:1}
  .mplayer-seek{position:absolute; left:0; right:0; top:-8px; width:100%}
  .mplayer-in{position:relative}
}