/* ===== Layout / Typography ===== */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap');

body{
  font-family:'Crimson Pro',serif;
  background:#fdfdfd;color:#333;
  max-width:1060px;margin:60px auto;padding:0 20px 60px;
  font-size:22px;line-height:1.6
}
h1{font-size:48px;text-align:center;margin-bottom:10px;font-weight:600;letter-spacing:.5px}
h2{font-size:28px;margin-top:50px;padding-top:30px;border-top:1px solid #ddd;font-weight:400;color:#444}

/* ===== Legend & Navigation ===== */
.legend{margin:30px 0 20px;text-align:center;font-size:18px;text-transform:uppercase}
.legend span{margin:0 12px;font-weight:600}
.decade-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 18px;margin-bottom:36px;font-size:22px}
.decade-links a{text-decoration:none;color:#9c8653;transition:color .3s}
.decade-links a:hover{color:#6f5c2f}
.decade-dropdown{display:none;text-align:center;margin-bottom:30px}
.decade-dropdown select{font-family:'Crimson Pro',serif;font-size:18px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;background:#fff}
@media(max-width:500px){.decade-links{display:none}.decade-dropdown{display:block}}

/* ===== Lists & layout ===== */
ol{padding-left:20px;margin-top:20px}
li{margin-bottom:3px;position:relative;padding-right:120px}
.film-meta{position:absolute;right:0;top:3px;display:flex;gap:6px;align-items:center}
.film-meta>*{order:1}.film-meta .number-tag{order:2}.film-meta .imdb-link{order:3}

/* ===== Tokens ===== */
.number-tag{width:24px;height:24px;font-size:.70em;font-weight:500;letter-spacing:.15px;
  border-radius:50%;line-height:24px;text-align:center;font-family:serif;border:1px solid #ccc;background:#f5f5f5;color:#333}
.number-pantheon{background:#f8d6d6}.number-excellent{background:#ffe3c2}.number-great{background:#d8f4e7}
.number-verygood{background:#d6eaff}.number-good{background:#fbe3f5}.number-neutral{background:#eaeaea}

.tag{display:inline-block;padding:3px 9px;font-size:14px;border-radius:999px;border:1px solid #ccc;
  background:#f5f5f5;color:#2a2a2a;text-transform:uppercase;font-family:'Crimson Pro',serif}

/* ===== Links ===== */
.imdb-link,.notes-link{display:inline-block;width:24px;height:24px;font-size:.65em;border:1px solid #ccc;
  border-radius:50%;background:#f5f5f5;color:#888;text-align:center;line-height:24px;text-decoration:none;transition:.3s}
.imdb-link:hover,.notes-link:hover{background:#e0e0e0;color:#333;border-color:#999}

/* ===== Notes bubble ===== */
.film-note{margin-left:28px;margin-top:8px;margin-bottom:12px;padding:12px 16px;background:#f3f3f3;border-radius:8px;
  color:#444;font-size:.95em;line-height:1.5}

/* ===== Colour legend ===== */
.pantheon{color:#d42222}.excellent{color:#ff8400}.great{color:#2fc47a}.verygood{color:#2986ff}.good{color:#f76ad9}