:root {
  --bg: #121110; --bg2: #1b1a18; --bg3: #26241f; --line: #34312b;
  --fg: #f3ead9; --fg2: #b9ae9b; --fg3: #7d7466;
  --gold: #d8b27a; --gold2: #f0cf98; --red: #e46a5a;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 15px/1.45 Inter, system-ui, -apple-system, Segoe UI, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.grow { flex: 1; }

/* demo banner */
.demo-banner { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: linear-gradient(90deg, #3a2c18, #2a2117); border-bottom: 1px solid #5a4528; font-size: 13.5px; color: #e9dcc4; }
.db-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-text b { color: var(--gold2); }
.db-btn { flex: none; background: var(--gold); color: #1a1410; font-weight: 700; padding: 7px 16px; border-radius: 999px; font-size: 13.5px; white-space: nowrap; transition: background .15s, transform .15s; }
.db-btn:hover { background: var(--gold2); transform: translateY(-1px); }

/* header */
header#top { position: sticky; top: 41px; z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; max-width: 1500px; margin: 0 auto; }
.brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 600; color: var(--gold2); white-space: nowrap; }
.tabs { display: flex; gap: 4px; margin-left: auto; }
.tabs button { padding: 7px 13px; border-radius: 999px; color: var(--fg2); font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.tabs button:hover { color: var(--fg); background: var(--bg3); }
.tabs button.on { color: var(--bg); background: var(--gold); }
.tabs b { font-size: 12px; }

.strip { display: flex; gap: 12px; padding: 6px 16px 10px; overflow-x: auto; scrollbar-width: none; max-width: 1500px; margin: 0 auto; }
.strip::-webkit-scrollbar { display: none; }
.av { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.av .ring { width: 56px; height: 56px; border-radius: 50%; padding: 2px; background: var(--line); transition: transform .15s, background .2s; }
.av .ring > svg, .av .all { width: 100%; height: 100%; border-radius: 50%; display: block; border: 2px solid var(--bg); background: var(--bg3); }
.av .all { display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--fg2); }
.av span { font-size: 11.5px; color: var(--fg2); max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.av:hover .ring { transform: scale(1.06); }
.av.on .ring { background: linear-gradient(135deg, var(--gold2), var(--gold)); }
.av.on span { color: var(--gold2); font-weight: 600; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 10px; max-width: 1500px; margin: 0 auto; }
.filters:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--bg3); color: var(--fg2); font-size: 13px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; transition: all .15s; }
.chip:hover { color: var(--fg); border-color: var(--line); }
.chip.on { background: color-mix(in srgb, var(--gold) 20%, var(--bg2)); color: var(--gold2); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.chip .mini { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; margin-left: -6px; }
.chip .mini svg { width: 100%; height: 100%; display: block; }
.chip.primary { background: var(--gold); color: var(--bg); }
.sep { width: 1px; height: 20px; background: var(--line); }
.count { color: var(--fg3); font-size: 13px; margin-left: auto; white-space: nowrap; }

/* coach mark */
.coach { position: fixed; z-index: 25; left: 50%; transform: translateX(-50%); top: 205px; background: var(--fg); color: var(--bg); font-weight: 600; padding: 10px 16px; border-radius: 14px; box-shadow: 0 12px 30px #000a; animation: bounce 1.6s ease-in-out infinite; white-space: nowrap; font-size: 14px; }
.coach::before { content: ''; position: absolute; top: -7px; left: 30px; border: 8px solid transparent; border-top: 0; border-bottom-color: var(--fg); }
@keyframes bounce { 50% { transform: translate(-50%, -6px); } }

/* grid */
main { max-width: 1500px; margin: 0 auto; padding: 10px 12px 120px; }
.sec { display: flex; align-items: baseline; gap: 10px; margin: 18px 4px 10px; }
.sec h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 30px; margin: 0; }
.sec span { color: var(--fg3); font-size: 13px; }
.jrow { display: flex; gap: 5px; margin-bottom: 5px; }
.tile { position: relative; overflow: hidden; border-radius: 3px; cursor: zoom-in; background: var(--bg3); animation: pop .35s ease both; }
.tile svg { width: 100%; height: 100%; display: block; transition: transform .35s; }
.tile:hover svg { transform: scale(1.03); }
.tile .fav { position: absolute; right: 6px; bottom: 4px; color: #fff; font-size: 15px; text-shadow: 0 1px 4px #000a; }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }
.empty { text-align: center; color: var(--fg3); padding: 70px 20px; }
.empty h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; color: var(--fg2); margin: 0 0 6px; font-weight: 500; }

/* people page */
.page-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 10px 4px 6px; }
.page-h h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 34px; margin: 0; }
.page-h span { color: var(--fg3); }
.hint { color: var(--fg3); font-size: 13.5px; margin: 0 4px 20px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px 14px; }
.pcard { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; }
.pcard .face { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid var(--bg2); transition: transform .2s, border-color .2s; }
.pcard .face svg { width: 100%; height: 100%; display: block; }
.pcard:hover .face { transform: translateY(-3px); border-color: var(--gold); }
.pcard .n { color: var(--fg3); font-size: 12px; margin-top: -4px; }
.nm-in { width: 100%; text-align: center; background: transparent; border: 0; border-bottom: 1.5px dashed var(--line); outline: none; padding: 2px 4px; font-weight: 600; font-size: 14px; }
.nm-in::placeholder { color: var(--gold); font-weight: 500; font-style: italic; }
.nm-in:focus { border-bottom-color: var(--gold); }
.nm { font-weight: 600; font-size: 14px; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 50; background: #0b0a09; touch-action: none; animation: fade .18s; }
@keyframes fade { from { opacity: 0; } }
.lb-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 64px 70px 110px; }
.lb-pic { position: relative; max-width: 100%; max-height: 100%; transition: transform .25s ease; }
.lb-pic > svg { display: block; width: 100%; height: 100%; border-radius: 4px; }
.tag { position: absolute; border: 2px solid #fffc; border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 0 0 1px #0005; transition: border-color .15s; }
.tag:hover { border-color: var(--gold2); }
.tag span { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 5px); background: #000c; color: #fff; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.lb.notags .tag { display: none; }
.lb-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 4px; padding: 10px; background: linear-gradient(#000a, transparent); z-index: 2; }
.ib { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 18px; color: #fff; }
.ib:hover { background: #fff2; }
.ib.on { color: var(--gold2); }
#lbFav.on { color: var(--red); }
.lb-count { color: #fffc; font-size: 13px; margin-left: 4px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 90px; font-size: 48px; color: #fff8; z-index: 2; }
.lb-nav:hover { color: #fff; }
.lb-nav.prev { left: 4px; } .lb-nav.next { right: 4px; }
.lb-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; justify-content: center; padding: 26px 10px 16px; background: linear-gradient(transparent, #000a); z-index: 2; overflow-x: auto; }
.lb-bottom .av .ring { width: 46px; height: 46px; }
.lb-bottom .av span { color: #fffd; }

/* modal, nudge, toast */
.modal { position: fixed; inset: 0; z-index: 70; background: #000a; display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 22px; width: min(420px, 100%); max-height: 80vh; overflow: auto; box-shadow: 0 20px 60px #000c; }
.modal-card h3 { margin: 0 0 8px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 27px; font-weight: 600; }
.modal-card p { color: var(--fg2); margin: 0 0 16px; }
.mrow { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.btn.gold { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.plist { display: flex; flex-direction: column; gap: 2px; }
.plist button { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; text-align: left; }
.plist button:hover { background: var(--bg3); }
.plist .pf { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; }
.plist .pf svg { width: 100%; height: 100%; display: block; }
.plist .c { margin-left: auto; color: var(--fg3); font-size: 12px; }
.nudge { position: fixed; z-index: 40; right: 18px; bottom: 18px; width: 300px; background: var(--fg); color: var(--bg); border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 20px 50px #000c; display: flex; flex-direction: column; gap: 6px; animation: up .35s ease; }
.nudge b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; }
.nudge span { font-size: 13.5px; color: #5d544b; margin-bottom: 8px; }
.nudge .db-btn { align-self: flex-start; background: #1a1410; color: var(--fg); }
.nudge .nx { position: absolute; top: 10px; right: 12px; color: #8f857a; }
@keyframes up { from { transform: translateY(14px); opacity: 0; } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; background: var(--fg); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-weight: 500; box-shadow: 0 10px 30px #0009; animation: up .2s; max-width: calc(100vw - 32px); }

@media (max-width: 720px) {
  .hide-sm { display: none; }
  .demo-banner { padding: 7px 10px; font-size: 12.5px; }
  header#top { top: 39px; }
  .bar { padding: 8px 10px; }
  .brand { font-size: 21px; }
  .tabs button { padding: 6px 10px; font-size: 14px; }
  .strip { padding: 4px 10px 8px; gap: 8px; }
  .av { width: 56px; } .av .ring { width: 50px; height: 50px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 10px 8px; gap: 6px; }
  .filters::-webkit-scrollbar { display: none; }
  .count { margin-left: 4px; }
  main { padding: 6px 4px 120px; }
  .jrow { gap: 3px; margin-bottom: 3px; }
  .sec h2 { font-size: 24px; }
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px 10px; }
  .lb-stage { padding: 56px 0 100px; }
  .lb-nav { display: none; }
  .coach { top: 190px; font-size: 13px; }
  .nudge { left: 12px; right: 12px; bottom: 12px; width: auto; }
}
@media (max-width: 720px) {
  .bar { gap: 6px; }
  .brand { font-size: 19px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .tabs { gap: 2px; flex: none; }
  .tabs button { padding: 6px 9px; font-size: 13.5px; }
}