:root {
      color-scheme: dark;
      --background: #050505;
      --panel: #111;
      --panel-hover: #1a1a1a;
      --border: #333;
      --text: #d0d0d0;
      --muted: #8f8f8f;
      --accent: #b91f24;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--background);
      color: var(--text);
      font-family: Verdana, Arial, sans-serif;
      line-height: 1.5;
    }

    .page {
      width: min(1500px, calc(100% - 32px));
      margin: 0 auto;
      padding: 28px 0 48px;
    }

    header {
      text-align: center;
      margin-bottom: 28px;
    }

    .logo img {
      max-width: min(100%, 700px);
      height: auto;
    }

    h1 {
      margin: 22px 0 10px;
      font-size: clamp(1.7rem, 4vw, 2.7rem);
      color: #e2e2e2;
    }

    .intro {
      max-width: 1000px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .toolbar {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      margin: 30px 0 20px;
      padding: 14px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 10px;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    #issue-search {
      width: min(460px, 100%);
      padding: 11px 13px;
      border: 1px solid #444;
      border-radius: 7px;
      background: #080808;
      color: var(--text);
      font: inherit;
    }

    #issue-search:focus {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }

    #issue-count {
      color: var(--muted);
      white-space: nowrap;
      font-size: 0.9rem;
    }

    .issue-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
      gap: 18px;
    }

    .issue-card {
      display: flex;
      min-width: 0;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 14px 10px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--panel);
      color: var(--text);
      text-align: center;
      text-decoration: none;
      transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
    }

    .issue-card:hover,
    .issue-card:focus-visible {
      transform: translateY(-3px);
      border-color: var(--accent);
      background: var(--panel-hover);
    }

    .issue-card img {
      width: 112px;
      height: 146px;
      max-width: 100%;
      object-fit: cover;
      background: #000;
      border: 1px solid #2d2d2d;
      box-shadow: 0 4px 12px rgb(0 0 0 / 45%);
    }

    .issue-card span {
      font-size: 0.78rem;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .issue-card[hidden] { display: none; }

    footer {
      margin-top: 36px;
      text-align: center;
      color: #686868;
      font-size: 0.78rem;
    }

    @media (max-width: 600px) {
      .page { width: min(100% - 20px, 1500px); }
      .toolbar { flex-direction: column; align-items: stretch; }
      #issue-search { width: 100%; }
      #issue-count { text-align: center; }
      .issue-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
      .issue-card img { width: 96px; height: 125px; }
    }
 .search-result {
  margin-bottom: 14px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.search-result:hover {
  border-color: #555;
  background: var(--panel-hover);
}

.search-result-title {
  margin: 0 0 6px;
  color: #e2e2e2;
  font-size: 1.15rem;
}

.search-result-location {
  margin: 0 0 12px;
  color: var(--accent);
  font-weight: bold;
}

.search-result p {
  margin: 5px 0;
}

.search-result-link {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: #eee;
  text-decoration: none;
}

.search-result-link:hover,
.search-result-link:focus-visible {
  background: var(--accent);
  color: #fff;
}
.search-result-link-title {
  color: #e2e2e2;
  text-decoration: none;
}

.search-result-link-title:hover,
.search-result-link-title:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}