/* Sample webfolio hubs (/examples/<audience>): a row of browser-framed cards, one per sample. */
.ex{padding-block:8px 96px}
.ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.ex-card{position:relative;display:flex;flex-direction:column;background:#fff;border:2px solid var(--ink);border-radius:10px;box-shadow:7px 7px 0 var(--ink);text-decoration:none;color:inherit;transition:transform .3s,box-shadow .3s}
.ex-card:nth-child(1){transform:rotate(-1.2deg)}
.ex-card:nth-child(2){transform:rotate(.8deg)}
.ex-card:nth-child(3){transform:rotate(-.5deg)}
.ex-card:nth-child(2) .tape{background:rgba(255,179,199,.85)}
.ex-card:nth-child(3) .tape{background:rgba(205,184,255,.85)}
.ex-card:hover,.ex-card:focus-visible{transform:rotate(0) translateY(-6px);box-shadow:10px 12px 0 var(--ink)}
.ex-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:2px solid var(--ink);font-size:12px;color:var(--ink-2)}
.ex-bar i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink)}
.ex-bar span{margin-left:8px;background:var(--paper-2,#F1F0EA);padding:2px 10px;border-radius:999px}
.ex-pic{display:block;aspect-ratio:16/10;overflow:hidden;background:#222}
.ex-pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ex-card:hover .ex-pic img{transform:scale(1.06)}
.ex-txt{display:grid;gap:8px;padding:20px 22px 24px}
.ex-txt b{font:400 28px/1.1 var(--serif)}
.ex-txt>span:not(.note):not(.ex-go){color:var(--ink-2);font-size:16px}
.ex-go{font:700 22px var(--hand);color:var(--blue);margin-top:4px}
.ex-small{margin-top:40px;font-size:14px;color:var(--ink-2);max-width:44em}
@media (max-width:900px){.ex-grid{grid-template-columns:1fr;max-width:520px}.ex-card:nth-child(n){transform:none}}