.creds__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
.cred {
    background: var(--paper);
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 240px;
    transition: background 280ms ease, transform 280ms ease, box-shadow 280ms ease;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--rule);
    isolation: isolate;
  }
.cred::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--brass);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 320ms ease;
  }
.cred:hover { background: var(--bone); transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(11,15,20,0.22); }
.cred:hover::after { transform: scaleX(1); }
.cred:hover .cred__icon { color: var(--brass-deep); opacity: 0.16; transform: translate(8%, -6%) rotate(-2deg); }
.cred__icon {
    position: absolute;
    top: -8%; right: -8%;
    width: 60%; height: 60%;
    color: var(--navy);
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
    transition: opacity 280ms ease, color 280ms ease, transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
  }
.cred__icon svg {
    width: 100%; height: 100%;
    stroke: currentColor; fill: none;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
.cred__label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-deep);
    font-weight: 700;
    z-index: 1; position: relative;
  }
.cred__name {
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: 19px;
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--ink);
    z-index: 1; position: relative;
    max-width: 80%;
    margin-top: 2px;
    flex: 1;
  }
.cred__name strong { font-family: "Archivo"; font-weight: 900; color: var(--navy); letter-spacing: -0.02em; }
.cred__verify {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-family: "IBM Plex Mono", monospace;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--navy);
    font-weight: 700;
    z-index: 1; position: relative;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 200ms ease, color 200ms ease;
  }
.cred:hover .cred__verify { gap: 14px; color: var(--brass-deep); }
.cred__verify::before {
    content: "↗";
    color: var(--brass-deep);
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: 13px;
  }
@media (max-width: 1100px) {
.creds__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.creds__grid { grid-template-columns: 1fr 1fr; }
}
/* 07/09: shared boring stuff block — swipe on mobile (scope-grid pattern) */
@media (max-width: 600px) {
  .creds__grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; scrollbar-width: none; }
  .creds__grid::-webkit-scrollbar { display: none; }
  .creds__grid > .cred { flex: 0 0 80%; scroll-snap-align: start; }
}