.wk-key { margin: 0; container-type: inline-size; }
.wk-key__row { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.wk-key__g { display: grid; grid-template-rows: auto 1fr; gap: var(--s3); min-width: 0; }
.wk-key__g--jl { flex: 330 1 0; }
.wk-key__g--inno, .wk-key__g--gld { flex: 105 1 0; }
.wk-key__g svg { display: block; width: 100%; height: auto; }

.wk-key .art use { fill: var(--ground); stroke-width: 1.5; }
.wk-key .art .crown { stroke-width: 2.1; }

.wk-key__t {
  display: grid; grid-template-rows: auto 1fr; gap: 0.15rem; margin-inline: 0.2rem; padding-top: var(--s3);
  border-top: 1px solid var(--hair-strong); text-align: center;
  font-family: var(--f-display); font-size: var(--t-sm); line-height: 1.3;
}
.wk-key__name { font-weight: 500; letter-spacing: 0.02em; color: var(--fg); }
.wk-key__n { align-self: end; color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.wk-key__cap { margin-top: var(--s5); font-size: var(--t-sm); color: var(--fg-soft); text-align: center; }
.wk-key .lift { --lift-step: -9px; }

@container (max-width: 359.98px) {
  .wk-key__row { flex-wrap: wrap; justify-content: space-evenly; row-gap: var(--s5); }
  .wk-key__g--jl { flex: 0 0 100%; }
  .wk-key__g--inno, .wk-key__g--gld { flex: 0 0 calc(100% * 105 / 330); }
}

@container (min-width: 360px) and (max-width: 479.98px) {
  .wk-key__t { font-size: var(--t-xs); }
}

.wk { padding-block: var(--band) calc(var(--band) * 1.1); }
.proj { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.proj + .proj { margin-top: clamp(5rem, 11vw, 10rem); }
.proj__info { display: grid; gap: var(--s4); align-content: start; justify-items: start; }
.proj__info .h2 { max-width: 14ch; }
.proj__p { color: var(--fg-soft); max-width: 44ch; text-wrap: pretty; }
.proj__ros { gap: var(--s2) var(--s5); }
.proj__link { margin-top: var(--s2); }
.proj__media { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); min-width: 0; }

.proj--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.proj--flip .proj__media { order: -1; }

@media (max-width: 960px) {
  .proj, .proj--flip { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .proj--flip .proj__media { order: 0; }
}

@media print { .wk-key .art use { fill: none; } }