.awards-summary {
  display: grid;
  /* The tile count is not fixed: the level and method tiles only appear when
     the catalogue carries them, and three more arrive once the per-member
     files have been read. Fitting them by width keeps every row full. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.award-summary__tile {
  display: flex;
  min-height: 110px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
}

.award-summary__value {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1;
}

/* "28 / 21 / 3" is three numbers in the space of one, so it drops a size
   rather than wrapping into the label under it. */
.award-summary__value--split {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}

/* A tile still waiting on the member files. It holds its place so the grid
   does not reflow under the reader when the numbers arrive. */
.award-summary__tile--pending .award-summary__value {
  opacity: .45;
}

.award-summary__note {
  margin-top: .35rem;
  font-size: .8rem;
  line-height: 1.35;
  color: #fff;
}

.award-summary__member {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.award-summary__member:hover,
.award-summary__member:focus-visible {
  color: #e0a3a8;
}

.award-summary__label,
.award-card__summary,
.award-card__holders,
.awards-updated,
.award-detail__summary,
.award-detail p,
.award-detail li,
.award-detail dt,
.award-detail dd {
  color: #fff;
}

.award-summary__label,
.award-summary__note,
.award-card__title,
.award-card__holders,
.award-filter,
.award-category__title,
.award-types__title,
.award-types__hint,
.award-type__title,
.award-type__body,
.award-detail__header h2,
.award-detail__category,
.award-detail__summary,
.award-detail__stat-value,
.award-detail__stat-label,
.award-pill {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* The collapsed "award types" explainer, between the summary tiles and the
   category filters. A native <details> so it opens with the keyboard and the
   browser's own find-in-page, and so it arrives closed with no script.

   --award-type-badge is the one size the row is built from: the medal reads
   from it, and so does the width a demo has to reserve, because the wings
   sweep far past the shield they hang behind. */
.award-types {
  --award-type-badge: 84px;
  margin: 0 0 1.5rem;
  padding: 0;
}

.award-types__summary {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .9rem 2.6rem .9rem 1.1rem;
  cursor: pointer;
  list-style: none;
}

/* Safari draws its own disclosure triangle unless this is turned off. */
.award-types__summary::-webkit-details-marker {
  display: none;
}

.award-types__summary:focus-visible {
  outline: 2px solid #d6544e;
  outline-offset: -2px;
}

.award-types__title {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
}

.award-types__hint {
  color: rgba(255, 255, 255, .72);
  font-size: .9rem;
}

/* The open/closed mark: a chevron that turns as the section opens. */
.award-types__chevron {
  position: absolute;
  top: 1.15rem;
  right: 1.1rem;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid rgba(255, 255, 255, .75);
  border-bottom: 2px solid rgba(255, 255, 255, .75);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform .2s ease;
}

.award-types[open] .award-types__chevron {
  transform: rotate(-135deg);
}

.award-types__panel {
  position: relative;
  z-index: 1;
  padding: 0 1.1rem 1.2rem;
}

.award-types__intro {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, .78);
  font-size: .95rem;
}

/* How an award is come by, rather than what its badge looks like. It closes the
   section under the three type cards, so it is set apart from them by the rule
   above it rather than by a box of its own. */
.award-types__note {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .78);
  font-size: .92rem;
  line-height: 1.55;
}

.award-types__grid {
  display: grid;
  gap: 1rem;
}

/* One type per row - badges on the left, the explanation beside them. Three
   across would not work: a five-pair wings badge is wider than a third of the
   page on its own. */
.award-type {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(12rem, 1fr);
  gap: 1.6rem;
  align-items: center;
  padding: 1.1rem 1.2rem;
}

/* The badges are built by award-badge.js exactly as a card builds them, so the
   example is the real insignia rather than a picture of one. The star and the
   counter disc sit above the shield's own box, which is what the top padding
   leaves room for; the wings stay inside it and only reach sideways. */
.award-type__demos {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
  padding-top: calc(var(--award-type-badge) * .4);
}

/* Each demo reserves the width its own insignia actually needs, handed to it
   as --award-type-span by awards.js: a bare shield takes little more than its
   box, a five-pair wing stack twice that. Laying every rung out on the widest
   one would leave the low rungs marooned in white space. */
.award-type__demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  width: calc(var(--award-type-badge) * var(--award-type-span, 1.15));
}

.award-type__badge {
  --award-badge-size: var(--award-type-badge);
}

/* The ladder reads left to right, so it starts at the card's left edge rather
   than sitting centred in its column, and the explanation stands beside it.
   Its medal is a size down from the other two, which is what keeps all six
   rungs on one line next to that text; where they still do not fit they wrap
   onto a second line, because a row that has to be scrolled hides the very
   progression it is there to show. */
.award-type--wings {
  --award-type-badge: 78px;
}

.award-type--wings .award-type__demos {
  gap: .25rem;
  justify-content: flex-start;
}

.award-type__caption {
  min-height: 2.5em;
  color: rgba(255, 255, 255, .72);
  font-size: .82rem;
  line-height: 1.25;
  text-align: center;
}

.award-type__title {
  margin: 0 0 .45rem;
  color: #fff;
  font-size: 1.05rem;
  text-transform: uppercase;
}

/* No width cap: the badges take the width their insignia needs and the
   explanation takes whatever is left, so on a wide screen it reads across the
   card instead of stopping short and leaving a column of empty space beside a
   paragraph that then runs several lines longer than it has to. */
.award-type__body {
  margin: 0;
  color: #fff;
  font-size: .92rem;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .award-types__chevron {
    transition: none;
  }
}

/* The floating back-to-top button. shared.css places it; only the colour
   changes, to the red the statistics pages use, because black on this page
   reads as nothing at all. */
.ToTop {
  background-color: #7d2128;
  display: flex;
}

.awards-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin: 1.5rem 0 2rem;
}

.award-filter {
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .68);
  color: #fff;
  padding: .7rem 1rem;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  max-width: 100%;
}

.award-filter:hover,
.award-filter:focus-visible,
.award-filter[aria-pressed="true"] {
  border-color: #fff;
  background: #7d2128;
}

.award-category {
  margin: 2rem 0 3rem;
}

.award-category__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .5rem;
  border-left: 5px solid #7d2128;
  padding-left: .8rem;
  color: #fff;
}

/* The mark that copies a link to a category, drawn the same way as the one
   beside a statistics section heading. */
.award-category__anchor {
  position: relative;
  flex: none;
  opacity: .45;
  font-size: .72em;
  line-height: 1;
  text-decoration: none;
  transition: opacity .15s ease-in-out;
}

.award-category__anchor:hover,
.award-category__anchor:focus-visible {
  opacity: 1;
}

.award-category__anchor:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* The confirmation replaces nothing and moves nothing: it is drawn beside the
   mark for a moment and then gone. */
.award-category__anchor.is-copied,
.award-category__anchor.is-failed {
  opacity: 1;
}

.award-category__anchor.is-copied::after,
.award-category__anchor.is-failed::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  border: 1px solid rgba(125, 33, 40, .75);
  border-radius: 4px;
  background-color: rgba(4, 5, 5, .96);
  padding: 3px 8px;
  white-space: nowrap;
  pointer-events: none;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .3px;
}

.award-category__anchor.is-copied::after {
  content: attr(data-copied);
  color: #d6544e;
}

.award-category__anchor.is-failed::after {
  content: attr(data-failed);
}

@media (prefers-reduced-motion: reduce) {
  .award-category__anchor {
    transition: none;
  }
}

/* How many awards the section holds, so a long page stays scannable. */
.award-category__count {
  border: 1px solid rgba(255, 255, 255, .35);
  padding: .1rem .5rem;
  color: rgba(255, 255, 255, .75);
  font-size: .8rem;
  font-weight: 700;
}

.award-category__note {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  max-width: 70ch;
  color: rgba(255, 255, 255, .72);
  font-size: .95rem;
}

.awards-grid {
  display: grid;
  /* Six per row: the cards carry a badge, a name and one figure, so they only
     need to be wide enough for a two-line title. The ladder below steps the
     count down before a card gets narrower than that. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .8rem;
}

.award-item {
  display: grid;
  min-width: 0;
}

.award-card {
  --bevel: 20px;
  appearance: none;
  position: relative;
  display: flex;
  min-height: 300px;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  padding: 1.3rem .85rem 1.15rem;
  text-align: center;
  cursor: pointer;
  font: inherit;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

/* .cut-corner paints the fill and rim on ::before/::after so child popups are
   not clipped. On a button that still leaves the rectangular corner painted,
   which reads as a leftover triangle outside the diagonal. Clip just that
   notch here; the polygon is oversized so the badge wings can still overflow. */
.award-card.cut-corner {
  clip-path: polygon(
    -5rem -5rem,
    calc(100% - var(--bevel)) -5rem,
    calc(100% - var(--bevel)) 0,
    100% var(--bevel),
    calc(100% + 5rem) var(--bevel),
    calc(100% + 5rem) calc(100% + 5rem),
    -5rem calc(100% + 5rem)
  );
}

.award-card:hover,
.award-card:focus-visible {
  border-color: #fff;
  transform: translateY(-2px);
}

.profile-award-card[data-earned="false"] .award-badge {
  opacity: .42;
  filter: grayscale(1);
}

.profile-award-detail .award-detail__content[data-earned="false"] .award-detail__badge {
  opacity: .42;
  filter: grayscale(1);
}

.profile-award-card[data-earned="false"] .award-card__title,
.profile-award-card[data-earned="false"] .award-card__summary {
  opacity: .72;
}

.award-item--open .award-card {
  border-color: rgba(255, 255, 255, .7);
  background: #181818;
  transform: none;
}

/* One shield recipe at three sizes. Its ribbons, markers and the wings behind
   it all scale from --award-badge-size, so a badge only says how big it is. */
.award-badge {
  position: relative;
  display: grid;
  width: var(--award-badge-size);
  height: var(--award-badge-size);
  flex: none;
  place-items: center;
}

.award-badge__frame {
  position: relative;
  z-index: 2;
  display: grid;
  width: 92%;
  height: 100%;
  place-items: center;
  background: linear-gradient(135deg, #f6f6f6 0, #858585 35%, #f0eeea 58%, #666 100%);
  clip-path: polygon(50% 0, 95% 15%, 89% 69%, 75% 86%, 50% 100%, 25% 86%, 11% 69%, 5% 15%);
  box-shadow:
    0 calc(var(--award-badge-size) * .12) calc(var(--award-badge-size) * .25) rgba(0, 0, 0, .45);
}

.award-badge__frame::before,
.award-badge__frame::after {
  position: absolute;
  clip-path: inherit;
  content: "";
}

.award-badge__frame::before {
  inset: 3.5%;
  background: linear-gradient(145deg, #b52e39, #5c141a 62%, #9d2730);
}

.award-badge__frame::after {
  inset: 8%;
  background:
    radial-gradient(circle at 45% 34%, rgba(125, 33, 40, .28), transparent 44%),
    linear-gradient(145deg, #242424, #090909 72%);
}

.award-badge__ribbons {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -12%;
  left: 0;
  height: 37%;
  pointer-events: none;
}

.award-badge__ribbons::before,
.award-badge__ribbons::after {
  position: absolute;
  top: 0;
  width: 23%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, .65);
  background: linear-gradient(90deg, #4f1015, #a32933 48%, #64151c);
  content: "";
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

.award-badge__ribbons::before {
  left: 27%;
  transform: rotate(8deg);
}

.award-badge__ribbons::after {
  right: 27%;
  transform: rotate(-8deg);
}

.award-badge__icon {
  position: relative;
  z-index: 1;
  width: 70%;
  height: 70%;
  object-fit: contain;
}

/* The wing roots sit under the medal, so a pair only shows what it sweeps past
   the rim and a taller stack keeps overlapping the pair below it. */
.award-badge__wings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--award-badge-size) * 2.6);
  height: calc(var(--award-badge-size) * 2.6);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.award-badge__wing {
  fill: url("#award-wing-metal");
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .55));
  stroke: rgba(16, 16, 16, .85);
  stroke-width: 3;
  stroke-linejoin: round;
}

/* Laid over the blade so the feather keeps a lit upper facet and a shaded
   underside instead of reading as one flat piece of metal. */
.award-badge__wing-gloss {
  fill: url("#award-wing-sheen");
}

.award-badge__star,
.award-badge__counter {
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
}

.award-badge__star {
  top: -30%;
  width: 46%;
  height: 46%;
  background: linear-gradient(135deg, #fff0a6 4%, #d38a19 42%, #ffcf62 63%, #8d5410 100%);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 94%, 50% 71%, 21% 94%, 32% 56%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 calc(var(--award-badge-size) * .035) calc(var(--award-badge-size) * .035) rgba(0, 0, 0, .8));
}

.award-badge__counter {
  top: -20%;
  display: grid;
  width: 34%;
  height: 34%;
  place-items: center;
  border: calc(var(--award-badge-size) * .016) solid #d4d4d4;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 38% 30%, #3a3a3a, #090909 62%),
    #111;
  box-shadow:
    0 0 0 calc(var(--award-badge-size) * .022) #7d2128,
    0 calc(var(--award-badge-size) * .045) calc(var(--award-badge-size) * .07) rgba(0, 0, 0, .7);
  color: #fff;
  font-size: calc(var(--award-badge-size) * .135);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 2px #000;
}

.award-badge__counter[data-length="3"],
.award-badge__counter[data-length="4"] {
  font-size: calc(var(--award-badge-size) * .09);
}

/* Holds the one wing outline the badges reference, never drawn on its own. */
.award-wing-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.award-card__badge {
  --award-badge-size: 92px;
  margin: .55rem 0 .4rem;
}

.award-detail__badge {
  --award-badge-size: 144px;
}

.award-detail__level-badge {
  --award-badge-size: 56px;
  justify-self: center;
}

.award-card__content {
  display: flex;
  width: 100%;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.award-pill {
  display: inline-flex;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, .35);
  background: #7d2128;
  color: #fff;
  padding: .2rem .55rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.award-card__title {
  color: #fff;
  font-size: 1.12rem;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.award-card__method {
  padding: .1rem .4rem;
  font-size: .6rem;
  letter-spacing: .07em;
}

.award-card__summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  font-size: .85rem;
  line-height: 1.45;
}

.award-card__holders {
  margin-top: auto;
  padding-top: .6rem;
  font-size: .8rem;
  font-weight: 700;
}

.award-card__indicator {
  position: absolute;
  top: .9rem;
  right: .9rem;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
}

.award-card__indicator::before,
.award-card__indicator::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  background: #fff;
  content: "";
  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}

.award-card__indicator::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.award-item--open .award-card__indicator {
  background: #7d2128;
}

.award-item--open .award-card__indicator::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.awards-updated,
.awards-message {
  text-align: center;
}

.award-detail {
  display: grid;
  grid-column: 1 / -1;
  grid-template-rows: 0fr;
  border: 0 solid rgba(255, 255, 255, .45);
  background: #111;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .28s ease, opacity .2s ease, visibility 0s linear .28s;
}

.award-detail--open {
  grid-template-rows: 1fr;
  border-width: 1px;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .32s ease, opacity .25s ease;
}

.award-detail__reveal {
  position: relative;
  min-height: 0;
  overflow: hidden;
  transition: height .34s ease;
}

/* Picking a second award keeps the panel open: the old detail slides out to
   one side while the new one slides in from the side its card sits on. */
.award-detail__content {
  border-top: 4px solid #7d2128;
  transition: transform .34s ease, opacity .28s ease;
}

.award-detail__content--leaving {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  pointer-events: none;
}

.award-detail__content--enter-right,
.award-detail__content--leave-right {
  opacity: 0;
  transform: translateX(5%);
}

.award-detail__content--enter-left,
.award-detail__content--leave-left {
  opacity: 0;
  transform: translateX(-5%);
}

.award-detail__content--enter-bottom,
.award-detail__content--leave-bottom {
  opacity: 0;
  transform: translateY(40px);
}

.award-detail__content--enter-top,
.award-detail__content--leave-top {
  opacity: 0;
  transform: translateY(-40px);
}

.award-detail__header {
  position: relative;
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 4vw, 2.25rem);
  overflow: hidden;
  min-height: 240px;
  padding: clamp(1.5rem, 5vw, 3rem);
  background:
    radial-gradient(circle at 12% 50%, rgba(125, 33, 40, .58), transparent 34%),
    linear-gradient(125deg, #1d1d1d, #0d0d0d 72%);
}

.award-detail__header::after {
  position: absolute;
  right: -65px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, .025), 0 0 0 58px rgba(255, 255, 255, .02);
  content: "";
}

.award-detail__heading {
  position: relative;
  z-index: 1;
}

.award-detail__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}

.award-detail__header h2 {
  margin: .65rem 0 .7rem;
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.08;
}

.award-detail__category {
  margin: 0;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.award-detail__summary {
  max-width: 62ch;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
}

.award-detail__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .15);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  background: #181818;
}

.award-detail__stat {
  display: flex;
  min-height: 105px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 1rem;
  text-align: center;
}

.award-detail__stat + .award-detail__stat {
  border-left: 1px solid rgba(255, 255, 255, .15);
}

.award-detail__stat-value {
  color: #fff;
  font-size: 1.65rem;
  line-height: 1;
}

.award-detail__stat-label {
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.award-detail__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.5rem, 5vw, 3rem);
}

.award-detail__main,
.award-detail__section {
  display: grid;
  gap: 1rem;
}

.award-detail__main {
  align-content: start;
  gap: 2rem;
}

.award-detail__section h3,
.award-detail__aside h3 {
  margin: 0;
  border-left: 4px solid #7d2128;
  padding-left: .7rem;
  color: #fff;
  font-size: 1.2rem;
}

.award-detail__section p {
  margin: 0;
  line-height: 1.65;
}

/* The note explaining a person-named award sits apart from the criteria under
   it: same card as a level row, so the biography does not read as a rule. */
.award-detail__section--namesake {
  gap: .8rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 3px solid #7d2128;
  background: #181818;
  padding: 1rem 1.15rem 1.15rem;
}

.award-detail__section--namesake h3 {
  border-left: 0;
  padding-left: 0;
}

/* Same link idiom as the summary's member link above, so the two read alike. */
.award-detail__namesake-link {
  justify-self: start;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.award-detail__namesake-link:hover,
.award-detail__namesake-link:focus-visible {
  color: #e0a3a8;
}

.award-detail__levels {
  display: grid;
  gap: .75rem;
}

.award-detail__level {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 3px solid #7d2128;
  background: #181818;
  padding: .8rem 1rem .8rem .75rem;
}

/* The badge column is wider than the medal because the wings reach past it. */
.award-detail__level--badged {
  grid-template-columns: 44px 152px minmax(0, 1fr);
}

.award-detail__level-copy {
  min-width: 0;
}

.award-detail__level-copy p {
  margin: 0;
}

.award-detail__level-holders,
.award-detail__level-names {
  margin-top: .35rem;
  font-size: .85rem;
  line-height: 1.45;
  color: #fff;
}

.award-detail__level-names {
  overflow-wrap: anywhere;
}

.award-detail__level-names.award-holders {
  gap: .45rem;
}

.award-detail__level-names .award-holders__list {
  font-size: inherit;
}

.award-detail__level-names .award-holders__more > summary {
  padding: .3rem .65rem;
  font-size: .8rem;
}

.award-holders {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .65rem;
}

.award-holders__list {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: .95rem;
  line-height: 1.55;
}

.award-holders__member {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.award-holders__member:hover,
.award-holders__member:focus-visible {
  color: #e0a3a8;
}

/* The tally beside a name: readable, but never louder than the name itself. */
.award-holders__count {
  color: rgba(255, 255, 255, .72);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.award-holders__more {
  min-width: 0;
}

.award-holders__more > summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid rgba(213, 84, 78, .75);
  background: rgba(125, 33, 40, .45);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  padding: .45rem .85rem;
}

.award-holders__more > summary:focus-visible {
  outline: 2px solid #d6544e;
  outline-offset: 2px;
}

.award-holders__more > summary::-webkit-details-marker,
.award-holders__more > summary::marker {
  display: none;
}

.award-holders__more > summary::after {
  color: #fff;
  content: "+";
  font-size: 1.1rem;
}

.award-holders__more[open] > summary::after {
  content: "-";
}

.award-holders__more[open] > .award-holders__list {
  margin-top: .65rem;
}

.award-holders--grouped {
  width: 100%;
  gap: 1rem;
}

.award-holders__rung {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  min-width: 0;
}

.award-holders__rung-title {
  margin: 0;
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
}

.award-detail__level--peak {
  border-left-color: #e5a557;
}

.award-detail__level-number {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: #7d2128;
  color: #fff;
  font-weight: 800;
}

.award-detail__variants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.award-detail__variant {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .35rem;
  border: 1px solid rgba(255, 255, 255, .18);
  background: #181818;
  padding: .9rem 1rem;
}

.award-detail__variant strong,
.award-detail__variant code {
  overflow-wrap: anywhere;
  color: #fff;
}

.award-detail__variant code {
  font-size: .76rem;
}

.award-detail__aside {
  align-self: start;
  border: 1px solid rgba(255, 255, 255, .18);
  background: #181818;
  padding: 1.1rem;
}

.award-detail__facts {
  margin: 1rem 0 0;
}

.award-detail__row {
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding: .75rem 0;
}

.award-detail__row:first-child {
  padding-top: 0;
}

.award-detail__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.award-detail__row dt {
  margin-bottom: .25rem;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.award-detail__row dd {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

@media (max-width: 1600px) {
  .awards-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .awards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .awards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .award-types {
    --award-type-badge: 66px;
  }

  .award-type {
    grid-template-columns: 1fr;
    gap: .9rem;
  }

  /* The wing ladder no longer fits as a row: 0+1 squeeze onto one line and
     the rest wrap alone, so the growing pairs look like a broken wrap rather
     than a series. Step each rung down and to the right instead. */
  .award-type--wings {
    --award-type-badge: 64px;
  }

  .award-type--wings .award-type__demos {
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: .2rem;
    justify-content: flex-start;
  }

  .award-type--wings .award-type__demo {
    --award-type-step: 0;
    align-self: start;
    margin-inline-start: calc(var(--award-type-step) * 10%);
    max-width: 100%;
  }

  .award-type--wings .award-type__demo:nth-child(2) { --award-type-step: 1; }
  .award-type--wings .award-type__demo:nth-child(3) { --award-type-step: 2; }
  .award-type--wings .award-type__demo:nth-child(4) { --award-type-step: 3; }
  .award-type--wings .award-type__demo:nth-child(5) { --award-type-step: 4; }
  .award-type--wings .award-type__demo:nth-child(6) { --award-type-step: 5; }

  .award-type--wings .award-type__caption { min-height: 0; }
}

@media (max-width: 620px) {
  /* Two narrower tiles per row beat one tall column: eight stacked tiles would
     push the catalogue itself off the first screen. */
  .awards-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .award-summary__tile {
    min-height: 0;
    padding: .85rem .7rem;
  }

  .award-summary__value {
    font-size: clamp(1.55rem, 8vw, 2.2rem);
  }

  .award-summary__value--split {
    font-size: clamp(1.15rem, 5vw, 1.55rem);
  }

  .award-summary__label,
  .award-summary__note {
    font-size: .74rem;
    line-height: 1.3;
  }

  .award-types {
    --award-type-badge: 56px;
  }

  .award-type--wings {
    --award-type-badge: 52px;
  }

  .award-type {
    padding: .9rem .85rem;
  }

  .award-type--wings .award-type__demo {
    margin-inline-start: calc(var(--award-type-step) * 6%);
  }

  /* Two per row rather than six: a phone card is about as wide as a desktop
     one, so the badge and title stay close to their full size here. */
  .awards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .award-card {
    min-height: 0;
    padding: 1.1rem .8rem 1rem;
  }

  .award-card__badge {
    --award-badge-size: 88px;
  }

  .award-card__title {
    font-size: 1.1rem;
  }

  .award-card__summary {
    -webkit-line-clamp: 4;
  }

  /* Stack the header here, not at 430px: a 96px badge column cannot hold the
     wings (2.6x the medal) and they run into the title beside it. */
  .award-detail__header {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    min-height: 0;
    padding: 1.5rem 1rem;
    text-align: center;
  }

  .award-detail__eyebrow {
    justify-content: center;
  }

  .award-detail__badge {
    --award-badge-size: 80px;
    margin: 1.6rem 0 2.2rem;
  }

  .award-detail__header h2 {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .award-detail__level--badged {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .award-detail__level-badge {
    --award-badge-size: 40px;
    grid-row: 2;
    grid-column: 1 / -1;
    margin: .5rem 0 .15rem;
  }

  .award-detail__stats,
  .award-detail__body {
    grid-template-columns: 1fr;
  }

  .award-detail__body {
    padding: 1.2rem 1rem;
    gap: 1.35rem;
  }

  .award-detail__stat {
    min-height: 0;
    padding: .9rem .75rem;
  }

  .award-detail__stat + .award-detail__stat {
    border-top: 1px solid rgba(255, 255, 255, .15);
    border-left: 0;
  }

  .award-detail__stat-value {
    font-size: 1.35rem;
  }

  .award-detail__stat-label {
    font-size: .74rem;
    line-height: 1.3;
  }

  .award-detail__variants {
    grid-template-columns: 1fr;
  }

  .award-detail__level {
    padding: .7rem .75rem;
  }

  .award-detail__aside {
    padding: .9rem;
  }
}

@media (max-width: 430px) {
  /* 129px tiles leave Czech labels touching the rim; one column is readable. */
  .awards-summary {
    grid-template-columns: 1fr;
  }

  .award-summary__tile {
    min-height: 88px;
    padding: .9rem 1rem;
  }

  .awards-grid {
    grid-template-columns: 1fr;
  }

  .award-card {
    padding: 1.15rem .8rem 1.05rem;
  }

  .award-card__title {
    font-size: 1.1rem;
  }

  .award-types__summary {
    align-items: flex-start;
    padding: .85rem 2.2rem .85rem .9rem;
  }

  .award-types__hint {
    flex: 1 1 100%;
  }

  .award-type--wings .award-type__demo {
    margin-inline-start: calc(var(--award-type-step) * 4%);
  }

  .award-detail__header {
    padding: 1.25rem .85rem;
  }

  .award-detail__badge {
    --award-badge-size: 72px;
    margin: 1.3rem 0 1.8rem;
  }

  .award-detail__body {
    padding: 1rem .85rem;
  }

  .award-detail__section h3,
  .award-detail__aside h3 {
    font-size: 1.05rem;
  }
}