:root{
    --ink:#0c0c0d;
    --paper:#f7f5f1;
    --paper-dim:#efece5;
    --red:#c80000;
    --red-dim:#a30000;
    --maroon:#52011c;
    --orange:#dd3d25;
    --line:#e2ddd2;
    --up:#1e7d3c;
    --down:#c80000;
    --shadow: 0 1px 2px rgba(12,12,13,.06), 0 8px 24px rgba(12,12,13,.05);
    --hero-photo: url(../assets/hero.jpg);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{ font-family:'Anton', sans-serif; letter-spacing:.5px; font-weight:400; margin:0; text-transform:uppercase;}
  .mono{ font-family:'IBM Plex Mono', monospace; }
  a{color:inherit;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative; overflow:hidden; background:var(--ink);
    color:#fff; min-height:300px;
  }
  .hero .photo{
    position:absolute; inset:0 0 0 auto; width:62%; height:100%;
    background-image:var(--hero-photo);
    background-size:cover; background-position:center; opacity:.5; filter:grayscale(10%) contrast(1.05);
  }
  .hero .photo::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, var(--ink) 0%, rgba(12,12,13,.88) 30%, rgba(12,12,13,.35) 65%, rgba(200,0,0,.18) 100%);
  }
  .hero-content{
    position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center;
    min-height:300px; padding: 56px clamp(20px,5vw,72px); max-width:1180px; margin:0 auto;
  }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:2.5px;
    text-transform:uppercase; color:#ffb3a3; margin-bottom:14px; display:flex; align-items:center; gap:10px;
    text-shadow:0 1px 3px rgba(0,0,0,.6);
  }
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--red); box-shadow:0 0 0 3px rgba(200,0,0,.35);}
  .hero h1{ font-size:clamp(40px,7vw,84px); line-height:.92; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.5);}
  .hero h1 span{color:#ff5c4d;}
  .hero p.sub{
    max-width:560px; margin-top:18px; font-size:16px; line-height:1.55; color:#eae7e0; font-weight:400;
    text-shadow:0 1px 4px rgba(0,0,0,.6);
  }

  /* ---------- NAV ---------- */
  nav{
    position:sticky; top:0; z-index:50; background:var(--ink); border-bottom:1px solid rgba(255,255,255,.08);
    display:flex; overflow-x:auto; scrollbar-width:none;
  }
  nav::-webkit-scrollbar{display:none;}
  nav button{
    flex:0 0 auto; background:none; border:none; color:#a9a6a0; font-family:'IBM Plex Mono',monospace;
    font-size:12.5px; letter-spacing:1px; text-transform:uppercase; padding:16px 18px; cursor:pointer;
    border-bottom:2px solid transparent; white-space:nowrap; transition:.15s;
  }
  nav button:hover{color:#fff;}
  nav button.active{color:#fff; border-bottom-color:var(--red);}

  main{ max-width:1180px; margin:0 auto; padding: 8px clamp(16px,4vw,32px) 100px; }
  section.panel{ display:none; padding-top:44px; }
  section.panel.active{ display:block; animation: fade .35s ease; }
  @keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

  .section-head{ margin-bottom:26px; }
  .section-head .kicker{
    font-family:'IBM Plex Mono',monospace; color:var(--red); font-size:12px; letter-spacing:2px;
    text-transform:uppercase; margin-bottom:8px; display:block;
  }
  .section-head h2{ font-size:clamp(26px,4vw,38px); }
  .section-head p{ color:#5a564e; max-width:860px; margin-top:10px; line-height:1.55; font-size:14.5px;}

  /* ---------- KPI CARDS ---------- */
  .kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:30px;}
  .kpi{
    background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px 18px;
    box-shadow:var(--shadow); position:relative; overflow:hidden;
  }
  .kpi::before{content:"";position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--red);}
  .kpi .num{ font-family:'Anton',sans-serif; font-size:clamp(28px,3.4vw,38px); line-height:1; color:var(--ink);}
  .kpi .num small{font-size:15px; font-family:'Inter'; font-weight:600; color:#8a8578;}
  .kpi .label{ margin-top:8px; font-size:12.5px; color:#6b665b; font-weight:600; letter-spacing:.2px;}
  .kpi .sub{ margin-top:4px; font-size:12px; color:#a19c8e; font-family:'IBM Plex Mono',monospace;}

  /* ---------- CARD ---------- */
  .card{ background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:22px clamp(14px,3vw,26px); margin-bottom:22px;}
  .card h3{ font-size:17px; margin-bottom:14px; letter-spacing:.3px;}
  .card h3 .tag{font-family:'IBM Plex Mono',monospace; font-size:11px; background:var(--paper-dim); color:#6b665b; padding:3px 8px; border-radius:20px; margin-left:8px; text-transform:none; letter-spacing:0; vertical-align:2px;}

  .grid-2{ display:grid; grid-template-columns:1.1fr .9fr; gap:20px;}
  @media(max-width:820px){ .grid-2{grid-template-columns:1fr;} }

  /* ---------- FORM CONTROLS ---------- */
  select, input[type=text]{
    font-family:'Inter'; font-size:14px; padding:9px 12px; border-radius:8px; border:1px solid var(--line);
    background:#fff; color:var(--ink);
  }
  input[type=text]:focus, select:focus{ outline:2px solid var(--red); outline-offset:1px;}
  .controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px;}
  .btnrow{display:flex; gap:8px; flex-wrap:wrap;}
  .pill-btn{
    font-family:'IBM Plex Mono',monospace; font-size:12px; padding:7px 13px; border-radius:20px;
    border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--ink); transition:.15s;
  }
  .pill-btn.active{ background:var(--ink); color:#fff; border-color:var(--ink);}
  .pill-btn:hover{border-color:var(--ink);}

  /* ---------- TABLES ---------- */
  table{ width:100%; border-collapse:collapse; font-size:13.5px;}
  thead th{
    text-align:left; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.5px;
    text-transform:uppercase; color:#8a8578; padding:8px 10px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff;
  }
  tbody td{ padding:9px 10px; border-bottom:1px solid #f0ede6; vertical-align:middle;}
  tbody tr:hover{ background:var(--paper-dim); }
  .rank{ font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--ink); width:44px;}
  .col-jaren{ width:90px; }
  .verloop-col{ font-size:11px; color:#a19c8e; max-width:230px; white-space:normal; word-break:break-word; line-height:1.6; }
  .title-narrow{ max-width:130px; white-space:normal; word-break:break-word; }
  .move-up{color:var(--up); font-family:'IBM Plex Mono',monospace; font-size:12px;}
  .move-down{color:var(--down); font-family:'IBM Plex Mono',monospace; font-size:12px;}
  .move-flat{color:#a19c8e; font-family:'IBM Plex Mono',monospace; font-size:12px;}
  .move-new{color:var(--orange); font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px;}
  .table-wrap{ max-height:560px; overflow:auto; border-radius:8px;}
  .hof-wrap{ max-height:840px; }
  .artist-name{font-weight:600;}
  .title-name{color:#5a564e;}
  .badge-14{
    display:inline-flex; align-items:center; gap:5px; background:var(--maroon); color:#fff; font-family:'IBM Plex Mono',monospace;
    font-size:10.5px; padding:2px 7px; border-radius:10px; margin-left:6px; letter-spacing:.3px;
  }
  .add-col{ width:36px; text-align:center; padding:6px !important; }
  .add-compare-btn{
    width:24px; height:24px; border-radius:6px; border:1px solid var(--line); background:#fff; color:var(--red);
    font-family:'IBM Plex Mono',monospace; font-size:15px; line-height:1; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; transition:.15s;
  }
  .add-compare-btn:hover{ background:var(--red); color:#fff; border-color:var(--red); }

  /* ---------- TOAST ---------- */
  #toast{
    position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
    background:var(--ink); color:#fff; padding:12px 18px; border-radius:8px; font-size:13.5px;
    box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.25s ease; z-index:1000;
    max-width:90vw; text-align:center;
  }
  #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---------- SEARCH / COMPARE ---------- */
  .search-box{ position:relative; flex:1; min-width:240px;}
  .search-results{
    position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:8px;
    margin-top:4px; max-height:280px; overflow:auto; box-shadow:var(--shadow); z-index:20; display:none;
  }
  .search-results.show{display:block;}
  .search-results div{ padding:9px 12px; cursor:pointer; font-size:13.5px; border-bottom:1px solid #f0ede6;}
  .search-results div:hover{ background:var(--paper-dim);}
  .search-results div small{ color:#8a8578; display:block; font-size:11.5px; margin-top:2px;}
  .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
  .chip{
    display:flex; align-items:center; gap:8px; background:var(--ink); color:#fff; padding:6px 8px 6px 12px;
    border-radius:20px; font-size:12.5px;
  }
  .chip button{ background:rgba(255,255,255,.15); border:none; color:#fff; border-radius:50%; width:18px; height:18px; cursor:pointer; font-size:11px; line-height:1;}
  .chip .swatch{width:9px;height:9px;border-radius:50%;}
  .empty-hint{ color:#a19c8e; font-size:13.5px; padding:30px 10px; text-align:center; font-family:'IBM Plex Mono',monospace;}

  canvas{max-width:100%;}

  footer{ text-align:center; padding:36px 20px 60px; color:#a19c8e; font-size:12.5px; font-family:'IBM Plex Mono',monospace;}
  footer img{height:26px; vertical-align:middle; margin-right:8px; border-radius:50%;}

  ::selection{background:var(--red); color:#fff;}

  @media(max-width:600px){
    .hero{min-height:280px;}
    .hero-content{min-height:280px; padding:40px 20px;}
    .hero .photo{width:78%; opacity:.35;}
    .grid-2{grid-template-columns:1fr;}
  }