:root {
  --bg: #fff; --fg: #111; --muted: #767676; --line: #ececec; --chip: #f1f1f1;
  --accent: #e60023; --bar: #d9d9d9; --bar-on: #111; --card-r: 16px; --shadow: 0 8px 30px rgba(0,0,0,.18);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --fg: #f2f2f2; --muted: #9a9a9a; --line: #262626; --chip: #222;
          --bar: #3a3a3a; --bar-on: #f2f2f2; --shadow: 0 8px 30px rgba(0,0,0,.6); }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 15px/1.5 -apple-system, "Segoe UI", Inter, Roboto, sans-serif; }
button, select, input { font: inherit; color: inherit; }

/* header */
.top { position: sticky; top: 0; z-index: 20; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
       padding: 12px 20px; background: var(--bg); }
.logo { font-weight: 800; font-size: 19px; text-decoration: none; color: var(--fg); letter-spacing: -.02em; white-space: nowrap; }
.logo span { color: var(--accent); margin-left: 4px; }
#q { flex: 1 1 260px; min-width: 0; height: 44px; border: 0; border-radius: 22px; padding: 0 18px;
     background: var(--chip); outline: none; }
#q:focus { box-shadow: 0 0 0 3px rgba(0,132,255,.35); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
select { height: 40px; border: 0; border-radius: 20px; padding: 0 14px; background: var(--chip); cursor: pointer; max-width: 200px; }
.seg { display: flex; background: var(--chip); border-radius: 20px; padding: 3px; }
.seg button { border: 0; background: none; padding: 7px 13px; border-radius: 17px; cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--fg); color: var(--bg); }

/* timeline */
.timeline { position: sticky; top: 68px; z-index: 15; background: var(--bg); padding: 4px 20px 10px;
            border-bottom: 1px solid var(--line); }
.tl-eras { position: relative; height: 18px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tl-eras span { position: absolute; top: 0; padding-left: 6px; border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; cursor: pointer; }
.tl-eras span:hover { color: var(--fg); }
.tl-eras b { font-weight: inherit; } .tl-eras em { font-style: normal; display: none; }
.tl-track { position: relative; height: 46px; cursor: crosshair; user-select: none; touch-action: none; }
.tl-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 1px; }
.tl-bars i { flex: 1; background: var(--bar); border-radius: 2px 2px 0 0; min-height: 2px; transition: background .15s; }
.tl-bars i.on { background: var(--bar-on); }
.tl-sel { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: rgba(230,0,35,.08);
          border: 1.5px solid var(--accent); cursor: grab; display: none; }
.tl-sel .h { position: absolute; top: 50%; width: 10px; height: 26px; margin-top: -13px; background: var(--accent);
             border-radius: 5px; cursor: ew-resize; }
.tl-sel .l { left: -6px; } .tl-sel .r { right: -6px; }
.tl-axis { position: relative; height: 16px; font-size: 11px; color: var(--muted); }
.tl-axis span { position: absolute; transform: translateX(-50%); }
.tl-info { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--muted); min-height: 22px; }
#tlRange { color: var(--fg); font-weight: 600; }
#tlReset { border: 0; background: var(--chip); border-radius: 12px; padding: 2px 10px; cursor: pointer; font-size: 12px; }

/* grid */
main { padding: 16px 12px 60px; }
.grid { display: flex; gap: 16px; align-items: flex-start; }
.col { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card { position: relative; cursor: zoom-in; }
.card .ph { position: relative; border-radius: var(--card-r); overflow: hidden; background: var(--chip); }
.card img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.card img.ok { opacity: 1; }
.card .ph.free { min-height: 120px; }
.card .ph.free img { height: auto; }
.card .ph::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .2s; }
.card:hover .ph::after { background: rgba(0,0,0,.18); }
.av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--chip); flex: none; }

/* artist cards (mode = artists) */
.acard { cursor: pointer; }
.acard .mosaic { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px;
                 aspect-ratio: 4/3; border-radius: var(--card-r); overflow: hidden; background: var(--chip); }
.acard .mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acard .mosaic img:first-child { grid-row: span 2; }
.acard .who { display: flex; gap: 10px; align-items: center; padding: 8px 4px 0; }
.acard .who .av { width: 36px; height: 36px; }
.acard b { display: block; font-size: 14px; line-height: 1.25; }
.acard small { color: var(--muted); font-size: 12px; }

/* influence cards (mode = influence) */
.inf-intro { max-width: 760px; margin: 6px auto 26px; text-align: center; }
.inf-intro h1 { font-size: 30px; letter-spacing: -.02em; margin: 4px 0 6px; }
.inf-intro p { color: var(--muted); font-size: 14px; margin: 0; }
.icard { cursor: pointer; }
.icard .ph { position: relative; border-radius: var(--card-r); overflow: hidden; background: var(--chip); }
.icard .ph img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s, transform .4s; }
.icard .ph img.ok { opacity: 1; }
.icard:hover .ph img { transform: scale(1.03); }
.icard .rank { position: absolute; left: 10px; top: 10px; background: rgba(255,255,255,.94); color: #111;
               font-weight: 800; font-size: 13px; padding: 3px 10px; border-radius: 12px; }
.icard .ibody { padding: 8px 4px 0; }
.icard .who { display: flex; gap: 9px; align-items: center; }
.icard .who > div { flex: 1; min-width: 0; }
.icard .who .av { width: 34px; height: 34px; }
.icard b { display: block; font-size: 14px; line-height: 1.25; }
.icard small { color: var(--muted); font-size: 12px; }
.icard p { margin: 6px 0 0; font-size: 13px; line-height: 1.42; }
.score { flex: none; min-width: 38px; height: 30px; border-radius: 15px; background: var(--fg); color: var(--bg);
         font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
.meter { height: 3px; background: var(--chip); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); }
.inf-line { display: flex; gap: 14px; align-items: center; text-align: left; max-width: 720px; margin: 8px auto 0;
            padding: 14px 16px; background: var(--chip); border-radius: 18px; font-size: 14px; color: var(--muted); }
.inf-line b { color: var(--fg); font-weight: 500; }
.big-score { min-width: 54px; height: 54px; border-radius: 27px; font-size: 20px; }

/* licences, placeholders, about page */
.toplink { color: var(--muted); text-decoration: none; font-size: 13px; white-space: nowrap; }
.toplink:hover { color: var(--fg); }
.credit { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.credit a { color: var(--muted); }
.ini { display: inline-flex; align-items: center; justify-content: center; background: var(--chip); color: var(--muted);
       font-weight: 700; font-size: 11px; }
.big.ini { font-size: 36px; margin: 0 auto; }
.artist-head .big.ini { display: flex; }
.mosaic.empty { display: flex !important; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.icard .ph.noimg { height: 46px; background: var(--chip); }
.nowork { margin-top: 20px; color: var(--muted); }
.nowork .btn { display: inline-block; margin-top: 10px; background: var(--accent); color: #fff; text-decoration: none;
               border-radius: 22px; padding: 10px 20px; font-weight: 600; }
.about { max-width: 760px; margin: 10px auto 60px; }
.about h1 { font-size: 30px; letter-spacing: -.02em; }
.about h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 22px 0 4px; }
.about a { color: var(--fg); }
.about .warn { background: rgba(230,0,35,.08); border-radius: 14px; padding: 12px 16px; margin-top: 22px; }

.more { text-align: center; color: var(--muted); padding: 30px; }

/* artist header */
.artist-head { max-width: 860px; margin: 10px auto 34px; text-align: center; }
.artist-head .big { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: var(--chip); }
.artist-head h1 { font-size: 34px; letter-spacing: -.02em; margin: 12px 0 2px; line-height: 1.15; }
.artist-head .sub { color: var(--muted); }
.artist-head .tags { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.tag { background: var(--chip); border-radius: 14px; padding: 4px 12px; font-size: 13px; }
.artist-head .bio { text-align: left; margin: 18px auto 0; max-width: 720px; }
.artist-head h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 18px 0 4px; }
.artist-head a { color: var(--fg); }
.back { border: 0; background: var(--chip); border-radius: 18px; padding: 7px 16px; cursor: pointer; margin-bottom: 8px; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); display: flex; align-items: center;
         justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-box { position: relative; display: flex; background: var(--bg); border-radius: 28px; overflow: hidden;
             max-width: 1100px; width: 100%; max-height: calc(100vh - 48px); box-shadow: var(--shadow); }
.modal-img { flex: 1 1 58%; background: #0d0d0d; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.modal-img img { max-width: 100%; max-height: calc(100vh - 48px); object-fit: contain; display: block; }
.modal-info { flex: 1 1 42%; padding: 32px 30px; overflow-y: auto; }
.modal-info h2 { margin: 0 0 4px; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.modal-info .yr { color: var(--muted); margin-bottom: 14px; }
.modal-info .desc { margin: 0 0 20px; }
.modal-info .src a { color: var(--muted); font-size: 13px; }
.modal-info .artist { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line);
                      margin-top: 18px; cursor: pointer; }
.modal-info .artist .av { width: 48px; height: 48px; }
.modal-info .artist b { display: block; }
.modal-info .artist small { color: var(--muted); }
.modal-info p.bio { font-size: 14px; color: var(--fg); opacity: .85; }
.modal-info .btn { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 22px;
                   padding: 10px 20px; font-weight: 600; cursor: pointer; }
.close { position: absolute; right: 14px; top: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0;
         background: var(--bg); font-size: 26px; line-height: 1; cursor: pointer; }

@media (max-width: 760px) {
  /* compact, non-sticky header: logo row, full-width search, one scrollable row of filters */
  .top { position: relative; padding: 10px 16px 6px; gap: 8px; }
  .logo { order: 1; flex: 1; }
  .toplink { order: 2; }
  #q { order: 3; flex: 1 1 100%; height: 42px; font-size: 16px; }  /* 16px stops iOS zoom-on-focus */
  .filters { order: 4; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
             margin: 0 -16px; padding: 0 16px 4px; -webkit-overflow-scrolling: touch; }
  .filters::-webkit-scrollbar { display: none; }
  .filters > * { flex: none; }
  select { height: 36px; font-size: 16px; max-width: 170px; padding: 0 10px; }
  .seg button { padding: 6px 11px; }

  /* timeline sticks on top while scrolling the gallery */
  .timeline { top: 0; padding: 2px 16px 6px; }
  .tl-track { height: 40px; }
  .tl-eras b { display: none; } .tl-eras em { display: inline; }
  .tl-sel .h { width: 18px; height: 34px; margin-top: -17px; border-radius: 9px; }
  .tl-sel .l { left: -10px; } .tl-sel .r { right: -10px; }
  .tl-info { font-size: 12px; gap: 10px; flex-wrap: wrap; }

  main { padding: 12px 8px 40px; }
  .grid, .col { gap: 10px; }
  .icard p { font-size: 12.5px; }
  .modal { padding: 0; }
  .modal-box { flex-direction: column; border-radius: 0; max-height: 100vh; height: 100%; overflow-y: auto; }
  .modal-img { flex: none; min-height: 200px; }
  .modal-img img { max-height: 60vh; }
  .modal-info { overflow: visible; padding: 22px 18px 40px; }
  .modal-info h2 { font-size: 22px; }
  .close { position: fixed; background: rgba(255,255,255,.92); color: #111; }
  .artist-head h1, .inf-intro h1, .about h1 { font-size: 26px; }
  .inf-line { flex-direction: column; text-align: center; }
  .about { padding: 0 8px; }
}