/** Portfolio Projects archive. */
.pa-portfolio-page .site-inner { max-width: none; padding: 0; }
.pa-portfolio-page .content { float: none; width: 100%; }

.pa-portfolio-hero { padding-block: clamp(4rem, 9vw, 8rem); }
.pa-portfolio-hero__grid { display: grid; gap: var(--pa-space-xl); }
.pa-portfolio-hero__content { align-self: center; max-width: 50rem; }
.pa-portfolio-hero h1 { line-height: .96; margin-bottom: var(--pa-space-lg); }
.pa-portfolio-hero h1 em { color: var(--pa-color-blue); font-weight: inherit; }
.pa-portfolio-hero__note { background: var(--pa-color-blue-soft); border-radius: 50% 50% .5rem 50%; box-shadow: 1.125rem 1.125rem 0 rgba(16,35,63,.08); display: flex; flex-direction: column; justify-content: flex-end; min-height: 25rem; padding: clamp(2rem,5vw,3.5rem); position: relative; }
.pa-portfolio-hero__note .pa-text-kicker { margin-bottom: var(--pa-space-sm); }
.pa-portfolio-hero__note > p:nth-of-type(2) { color: var(--pa-color-ink); font-family: var(--pa-font-heading); font-size: var(--pa-size-step-1); font-weight: 600; line-height: 1.4; }
.pa-portfolio-hero__note > span { color: var(--pa-color-blue); font-size: 2rem; position: absolute; right: 2.5rem; top: 2rem; }

.pa-portfolio-list { display: grid; gap: clamp(2rem,5vw,4rem); }
.pa-project-card { background: var(--pa-color-white); border: 1px solid var(--pa-color-border); box-shadow: 0 1.25rem 3rem rgba(16,35,63,.08); margin: 0; overflow: hidden; }
.pa-project-card__visual { background: var(--pa-color-paper); overflow: hidden; }
.pa-project-card__visual a { display: block; }
.pa-project-card__visual img { display: block; height: auto; transition: transform .35s ease; width: 100%; }
.pa-project-card__visual a:hover img { transform: scale(1.015); }
.pa-project-card__visual a:focus-visible { outline: .2rem solid var(--pa-color-blue); outline-offset: -.35rem; }
.pa-project-card__content { align-self: center; padding: clamp(1.75rem,4vw,3.5rem); }
.pa-project-card__platform { color: var(--pa-color-blue); font-size: .72rem; font-weight: 750; letter-spacing: .12em; margin-bottom: var(--pa-space-sm); text-transform: uppercase; }
.pa-project-card h3 { font-size: clamp(1.8rem,4vw,3.25rem); line-height: 1; margin-bottom: var(--pa-space-md); }
.pa-project-card h3 a { color: var(--pa-color-ink); text-decoration: none; }
.pa-project-card h3 a:hover { color: var(--pa-color-blue); }
.pa-project-card__brief { color: var(--pa-color-text); font-size: var(--pa-size-step--1); }
.pa-project-card__brief > :last-child { margin-bottom: 0; }
.pa-project-card__website-link,
.pa-project-card__report-link { display: inline-block; font-size: var(--pa-size-step--1); font-weight: 700; margin-top: var(--pa-space-md); }

.pa-project-card__pagespeed { align-items: start; border-top: 1px solid var(--pa-color-border); display: grid; gap: var(--pa-space-md); grid-template-columns: minmax(8rem,.6fr) minmax(10rem,1fr); margin-top: var(--pa-space-lg); padding-top: var(--pa-space-lg); }
.pa-project-card__pagespeed-label { color: var(--pa-color-ink); font-size: .82rem; font-weight: 750; letter-spacing: .08em; margin: 0; text-transform: uppercase; }
.pa-project-card__pagespeed-meta { color: var(--pa-color-text); font-size: .75rem; margin: .35rem 0 0; text-transform: capitalize; }
.pa-project-card__pagespeed-image { background: var(--pa-color-paper); border: 1px solid var(--pa-color-border); display: block; grid-column: 2; grid-row: 1 / span 2; overflow: hidden; }
.pa-project-card__pagespeed-image img { display: block; height: auto; width: 100%; }
.pa-project-card__pagespeed-image:focus-visible { outline: .2rem solid var(--pa-color-blue); outline-offset: .2rem; }
.pa-project-card__report-link { grid-column: 1; margin-top: 0; }
.pa-portfolio-empty { background: var(--pa-color-white); border-left: .35rem solid var(--pa-color-blue); padding: var(--pa-space-lg); }

.pa-portfolio-cta { text-align: center; }
.pa-portfolio-cta h2 { font-size: var(--pa-size-step-4); line-height: .95; margin-bottom: var(--pa-space-md); }
.pa-portfolio-cta > div > p:not(.pa-text-kicker) { margin-inline: auto; max-width: 38rem; }

@media (min-width: 52rem) {
	.pa-portfolio-hero__grid { grid-template-columns: minmax(0,1.35fr) minmax(18rem,.65fr); }
}

@media (max-width: 51.99rem) {
	.pa-portfolio-hero__note { min-height: 20rem; }
}

@media (max-width: 34rem) {
	.pa-project-card__pagespeed { grid-template-columns: 1fr; }
	.pa-project-card__pagespeed-image,
	.pa-project-card__report-link { grid-column: 1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.pa-project-card__visual img { transition: none; }
	.pa-project-card__visual a:hover img { transform: none; }
}