:root {
      color-scheme: light;
      font-family: Arial, Helvetica, sans-serif;
      color: #183047;
      background: #f5f8fc;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      padding: 12px 20px 32px;
      background: linear-gradient(180deg, #edf5ff 0, #f5f8fc 230px);
    }

    main {
      width: min(100%, 960px);
      margin: 0 auto;
    }

    h1 {
      margin: 0 0 44px;
      text-align: center;
      font-size: clamp(1.35rem, 3vw, 1.75rem);
      line-height: 1.2;
      color: #174a7e;
      text-decoration: underline;
      text-decoration-color: #e9a93b;
      text-decoration-thickness: 3px;
      text-underline-offset: 6px;
    }

    .table-scroll { width: 100%; }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 14px;
      overflow: hidden;
      border: 1px solid #7b9ab8;
      background: #fff;
      box-shadow: 0 5px 16px rgb(35 75 112 / 10%);
    }

    col.number { width: 8.7%; }
    col.description { width: 55.4%; }
    col.photo { width: 35.9%; }

    td {
      border: 1px solid #9bb1c8;
      padding: 3px 8px;
      vertical-align: m;
    }

    td.number {
      padding-left: 9px;
      color: #174a7e;
      font-weight: 700;
      background: #e6f1fc;
    }

    tr.featured td:nth-child(2) { background: #fff8e9; }
    tr.featured td:nth-child(3) { background: #eaf4ff; }
    tr.featured { height: 150px; }
    tr.empty { height: 18px; }
    tr.empty:nth-of-type(odd) td:not(.number) { background: #f4f8fc; }

    .thumbnail-link {
      display: block;
      width: min(100%, 197px);
      height: 194px;
      margin: -3px auto;
      overflow: hidden;
      /* background: #f1f1f1; */
      cursor: zoom-in;
    }

    .thumbnail-link img {
      display: block;
      width: 200px;
      height: 200px;
      object-fit: contain;
      transition: transform 180ms ease;
    }

    .thumbnail-link:hover img { transform: scale(1.035); }
    .thumbnail-link:focus-visible { outline: 3px solid #2257bf; outline-offset: 2px; }

    /* The lightbox is opened by the small jQuery plugin below. */
    .achievement-lightbox {
      position: fixed;
      z-index: 10;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgb(0 0 0 / 82%);
      opacity: 0;
      visibility: hidden;
      transition: opacity 160ms ease, visibility 160ms ease;
    }

    .achievement-lightbox.is-open { opacity: 1; visibility: visible; }

    .achievement-lightbox img {
      display: block;
      max-width: min(100%, 900px);
      max-height: calc(100vh - 48px);
      object-fit: contain;
      box-shadow: 0 8px 40px rgb(0 0 0 / 45%);
    }

    .lightbox-close {
      position: absolute;
      top: 12px;
      right: 18px;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      color: #fff;
      background: transparent;
      font: 32px/1 Arial, sans-serif;
      cursor: pointer;
    }

    @media (max-width: 560px) {
      body { padding: 14px 12px 24px; }
      h1 { margin-bottom: 30px; }
      table { font-size: 12px; }
      col.number { width: 9%; }
      col.description { width: 51%; }
      col.photo { width: 40%; }
      td { padding: 4px; }
      tr.featured { height: 155px; }
      .thumbnail-link { height: 150px; margin: -4px auto; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: 0.01ms !important; }
    }