/* --- Blocks -----------------------------------------------------------
   Every block is one plate. Its colour is the IWF weight code, and the
   weight is what the link asks of you: red is signing up for coaching,
   chalk-white is following an account. The corner tag says which. */
.plate {
  --on: var(--chalk);
  position: relative;
  display: grid;
  align-content: end;
  gap: .2rem;
  padding: clamp(.85rem, 3vw, 1.25rem);
  color: var(--on);
  background: var(--ink);
  overflow: hidden;
}

.plate-25 {
  background: var(--plate-25);
}

.plate-20 {
  background: var(--plate-20);
}

.plate-15 {
  background: var(--plate-15);
  --on: var(--ink);
}

.plate-10 {
  background: var(--plate-10);
}

.plate-05 {
  background: var(--plate-05);
  --on: var(--ink);
}

.plate-name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  line-height: .95;
}

.span-2 .plate-name {
  font-size: clamp(1.6rem, 6vw, 2.5rem);
}

.plate-note {
  font-size: .84rem;
  line-height: 1.3;
  color: var(--on);
  opacity: .9;
}

/* The weight tag: which plate this block is. */
.plate-tag {
  position: absolute;
  top: 0;
  right: 0;
  padding: .3rem .55rem;
  background: rgba(14, 15, 16, .28);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
}

.plate-15 .plate-tag,
.plate-05 .plate-tag {
  background: rgba(14, 15, 16, .12);
}

/* Links get a chalk line struck round them when you reach them. */
a.plate {
  transition: box-shadow .16s var(--ease);
}

a.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 0 var(--on);
  transition: box-shadow .16s var(--ease);
  pointer-events: none;
}

a.plate:hover::after,
a.plate:focus-visible::after {
  box-shadow: inset 0 0 0 5px var(--on);
}

a.plate:focus-visible {
  outline-offset: -5px;
}

/* --- Identity block --------------------------------------------------- */
.id {
  align-content: space-between;
  gap: 1rem;
}

.id h1 {
  font-size: clamp(2.1rem, 8vw, 3.4rem);
}

.id .trade {
  color: var(--chalk-dim);
  font-size: .92rem;
}

.id .taking {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--plate-15);
}

.id .taking::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--plate-15);
}

/* --- Legend swatches -------------------------------------------------- */
.swatch {
  width: 13px;
  height: 13px;
}

.swatch-25 { background: var(--plate-25); }
.swatch-20 { background: var(--plate-20); }
.swatch-15 { background: var(--plate-15); }
.swatch-10 { background: var(--plate-10); }
.swatch-05 { background: var(--plate-05); box-shadow: inset 0 0 0 1px var(--ink-soft); }

/* --- Footer stamps ---------------------------------------------------- */
.stamp {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--ink);
  color: var(--chalk);
  transition: background .16s var(--ease);
}

.stamp svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stamp:hover,
.stamp:focus-visible {
  background: var(--plate-25);
}

/* --- Load in ----------------------------------------------------------
   The blocks are set down one at a time, heaviest first. */
@keyframes set-down {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

.plate {
  animation: set-down .4s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  .plate {
    animation: none;
  }

  a.plate,
  a.plate::after,
  .stamp {
    transition: none;
  }
}