/* Grade House Who We Help — three manila production pattern cards: the top
 * right corner cut away, a punched hanging hole near the top left, a grain
 * line with arrowheads down the right side and a pencilled note in italic
 * serif. Cards hang straight, in a three-column grid. */

.gh.audience { --aud-line: var(--gh-ink); --aud-cut: 28px; }
.gh.audience .aud__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.gh.audience .aud__card { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 340px; padding: 64px 56px 32px 32px; background: var(--gh-card); border-radius: 2px;
	clip-path: polygon(0 0, calc(100% - var(--aud-cut)) 0, 100% var(--aud-cut), 100% 100%, 0 100%); }
.gh.audience .aud__card .punch { left: 26px; top: 24px; }
.gh.audience.tone-card .aud__card .punch { background: var(--gh-card-2); }
.gh.audience.tone-ink .aud__card .punch { background: var(--gh-ink-2); }

.gh.audience .aud__grain { position: absolute; right: 22px; top: 56px; bottom: 32px; width: 12px; height: calc(100% - 88px); fill: none; stroke: var(--aud-line); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }

.gh.audience .aud__note { font: italic 500 16px/1.2 var(--gh-head); color: var(--gh-blue); transform: rotate(-2deg); transform-origin: 0 50%; }
.gh.audience .aud__title { font: 600 clamp(22px, 1.9vw, 28px)/1.14 var(--gh-head); letter-spacing: var(--gh-track); color: var(--gh-ink); text-wrap: balance; }
.gh.audience .aud__text { font-size: 16px; line-height: 1.6; color: var(--gh-text); }
.gh.audience .aud__more { margin-top: auto; padding-top: 8px; }
.gh.audience .aud__card .tlink { color: var(--gh-ink); }
.gh.audience .aud__card .tlink:hover { color: var(--gh-blue); }

@media (max-width: 1024px) {
	.gh.audience .aud__cards { grid-template-columns: 1fr 1fr; }
	.gh.audience .aud__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.gh.audience .aud__cards { grid-template-columns: 1fr; gap: 16px; }
	.gh.audience .aud__card { min-height: 0; padding: 56px 48px 28px 24px; }
	.gh.audience .aud__card .punch { left: 20px; top: 20px; }
	.gh.audience .aud__grain { right: 18px; }
}