/* Blend each logo against an explicit paper backdrop, including during hover transforms. */
.portfolio-logo-wall{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.85fr) minmax(0,1fr);align-items:center;gap:40px;margin-top:96px;padding-block:36px 12px;scroll-margin-top:130px}
.portfolio-logo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 22px}
.portfolio-logo{display:flex;align-items:center;justify-content:center;min-width:0;min-height:52px;background:var(--paper);isolation:isolate;transition:transform .2s ease}
.portfolio-logo:hover{transform:translateY(-3px)}
.portfolio-logo[href="portfolio/team-monolith/"] .portfolio-logo-mark{width:min(100%,68px)}
.portfolio-logo:focus-visible{outline:2px solid var(--orange);outline-offset:6px;border-radius:2px}
.portfolio-logo-mark{display:block;position:relative;overflow:hidden;width:min(100%,calc(25px * var(--logo-ratio)));aspect-ratio:var(--logo-ratio);max-width:110px}
.portfolio-logo-mark img{position:absolute;max-width:none;width:var(--logo-width);height:auto;left:var(--logo-left);top:var(--logo-top)}
.portfolio-logo-intro{text-align:center}
.portfolio-logo-intro h2{font-family:var(--display-font);font-weight:500;font-size:clamp(32px,3.25vw,46px);line-height:1.05;letter-spacing:-.7px;margin:0}
.portfolio-logo-intro p{color:var(--muted);font-size:13px;line-height:1.9;word-break:keep-all;margin:20px 0 28px}
.portfolio-logo-intro .line-link{white-space:nowrap}
@media(max-width:1000px){.portfolio-logo-wall{gap:26px;grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr)}.portfolio-logo-grid{gap:20px 16px}}
@media(max-width:760px){.portfolio-logo-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;margin-top:62px;padding-block:12px 0}.portfolio-logo-intro{grid-column:1/-1;grid-row:1;margin-bottom:12px}.portfolio-logo-intro h2{font-size:38px}.portfolio-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}.portfolio-logo-mark{max-width:100px}.portfolio-logo-intro p{margin:16px 0 22px}}
@media(max-width:480px){.portfolio-logo-wall{display:flex;flex-direction:column;gap:22px}.portfolio-logo-grid{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px}.portfolio-logo-intro{order:-1}.portfolio-logo-mark{width:min(100%,calc(22px * var(--logo-ratio)));max-width:96px}.portfolio-logo{min-height:44px}}
@media(prefers-reduced-motion:reduce){.portfolio-logo{transition:none}.portfolio-logo:hover{transform:none}}

/* Read across each row: three marks, the editorial center, then three marks. */
.portfolio-logo-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(240px,2.4fr) repeat(3,minmax(0,1fr));gap:24px 22px}
.portfolio-logo{grid-column:var(--wall-column);grid-row:var(--wall-row)}
.portfolio-logo-intro{grid-column:4;grid-row:1 / span 4}
@media(max-width:1000px){.portfolio-logo-wall{grid-template-columns:repeat(3,minmax(0,1fr)) 210px repeat(3,minmax(0,1fr));gap:20px 14px}.portfolio-logo-intro h2{font-size:32px}}
@media(max-width:760px){.portfolio-logo-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px}.portfolio-logo{grid-column:auto;grid-row:auto}.portfolio-logo-intro{grid-column:1/-1;grid-row:auto;margin-bottom:24px}}

/* Optical sizing: compact symbols need height, long wordmarks need width. */
.portfolio-logo-mark{width:min(100%,var(--logo-display-width,115px));max-width:none}
.portfolio-logo[href="portfolio/farmskin/"]{--logo-display-width:82px}
.portfolio-logo[href="portfolio/qeexo/"]{--logo-display-width:98px}
.portfolio-logo[href="portfolio/noom/"]{--logo-display-width:98px}
.portfolio-logo[href="portfolio/finda/"],.portfolio-logo[href="portfolio/life-x/"]{--logo-display-width:98px}
.portfolio-logo[href="portfolio/airbility/"],.portfolio-logo[href="portfolio/conportlab/"],.portfolio-logo[href="portfolio/tandum-studio/"]{--logo-display-width:125px}
.portfolio-logo[href="portfolio/far-eastern/"]{--logo-display-width:38px}
@media(max-width:760px){.portfolio-logo-mark{width:min(100%,var(--logo-display-width,104px))}}