/* Portfolio page (/portfolio + 5 languages) compact layout — 27 Sep 2026. Scoped to main.portfolio-compact only. Logo palette (theme-guide). */
.portfolio-compact{--pt-blue:#0068DF;--pt-blue-hover:#0055B7;--pt-navy:#0D4875;--pt-ink:#3A3A3A;--pt-text-mid:#555555;--pt-text-soft:#666666;--pt-line:#DFE2E4;--pt-wash:#F3F8FE;--pt-tint:#E6F0FC;--pt-border:#BFD8F5;--pt-white:#FFFFFF}

/* Stories: four compact cards in one row (a swipe row on phones) */
.portfolio-compact .story-section{padding:32px 0 28px}
.portfolio-compact .story-section.story-pale{background:var(--pt-wash)}
.portfolio-compact .story-section .eyebrow{color:var(--pt-blue)}
.portfolio-compact .story-intro{max-width:900px;margin-bottom:16px}
.portfolio-compact .story-intro h2{font-size:25px;line-height:1.25;margin:6px 0 8px;color:var(--pt-ink)}
.portfolio-compact .story-intro p{font-size:16.5px;line-height:1.6;margin:0;color:var(--pt-text-mid)}
.portfolio-compact .story-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.portfolio-compact .story-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--pt-line);border-radius:10px;background:var(--pt-white)}
.portfolio-compact .story-card>a{padding:12px;background:var(--pt-tint)}
.portfolio-compact .story-card img{height:140px}
.portfolio-compact .story-card-copy{flex:1;padding:14px 16px 12px}
.portfolio-compact .story-family{font-size:11px;color:var(--pt-navy)}
.portfolio-compact .story-card-copy h3{font-size:16.5px;line-height:1.3;margin:6px 0;color:var(--pt-ink)}
.portfolio-compact .story-card-copy h3 a{color:var(--pt-ink);text-decoration:none}
.portfolio-compact .story-card-copy p{font-size:14px;line-height:1.5;margin:0 0 8px;color:var(--pt-text-mid);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.portfolio-compact .story-card-copy .text-link{min-height:0;font-size:14px;color:var(--pt-blue);gap:.3em}
.portfolio-compact .story-card-copy .text-link::after{content:"";position:absolute;inset:0;border-radius:10px}
.portfolio-compact .story-card:hover{border-color:var(--pt-border)}
.portfolio-compact .story-section .wrap>.story-link{min-height:40px;margin-top:10px;color:var(--pt-navy);gap:.3em}
.portfolio-compact .story-note{margin:0;font-size:13.5px;line-height:1.55;color:var(--pt-text-soft);max-width:none}

/* Work: category buttons + four pictures across */
.portfolio-compact>section.wrap.section{padding-top:28px;padding-bottom:44px}
.portfolio-compact .filter-links{gap:8px;margin-bottom:18px}
.portfolio-compact .filter-links a{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--pt-border);background:var(--pt-tint);color:var(--pt-navy);font-size:15px;font-weight:650;line-height:1.2;white-space:nowrap}
.portfolio-compact .filter-links a.active,.portfolio-compact .filter-links a:hover{background:var(--pt-blue);border-color:var(--pt-blue);color:var(--pt-white)}
.portfolio-compact .portfolio-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.portfolio-compact .portfolio-grid figure{display:flex;flex-direction:column;border:1px solid var(--pt-line);border-radius:10px;background:var(--pt-white)}
.portfolio-compact .portfolio-grid img{height:200px;padding:10px;background:var(--pt-wash)}
.portfolio-compact .portfolio-grid figcaption{padding:12px 14px 14px}
.portfolio-compact .portfolio-grid .eyebrow{margin:0 0 4px;font-size:11px;line-height:1.4;color:var(--pt-blue)}
.portfolio-compact .portfolio-grid h3{font-size:15.5px;line-height:1.3;margin:0 0 4px;color:var(--pt-ink)}
.portfolio-compact .portfolio-grid figcaption>p:not(.eyebrow){margin:0;font-size:13px;line-height:1.45;color:var(--pt-text-soft)}
.portfolio-compact .portfolio-grid .story-link{min-height:0;margin-top:6px;font-size:14px;font-weight:650;color:var(--pt-blue);gap:.3em}
.portfolio-compact .portfolio-grid .story-link:hover{color:var(--pt-blue-hover)}

@media (max-width:1100px){
  .portfolio-compact .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .portfolio-compact .portfolio-grid img{height:190px}
  .portfolio-compact .story-card>a{padding:12px}
  .portfolio-compact .story-card img{height:130px}
}
@media (max-width:980px){
  .portfolio-compact .story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portfolio-compact .story-card{display:grid;grid-template-columns:150px minmax(0,1fr)}
  .portfolio-compact .story-card img{height:120px}
}
@media (max-width:767px){
  .portfolio-compact .story-section{padding:24px 0 22px}
  .portfolio-compact .story-intro h2{font-size:22px}
  .portfolio-compact .story-intro p{font-size:15.5px}
  .portfolio-compact .story-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-inline:-22px;padding:0 22px 8px;scroll-padding-inline:22px}
  .portfolio-compact .story-card{flex:0 0 72%;display:flex;flex-direction:column;scroll-snap-align:start}
  .portfolio-compact .story-card img{height:130px}
  .portfolio-compact .story-card-copy{padding:12px 14px}
  .portfolio-compact>section.wrap.section{padding-top:20px;padding-bottom:32px}
  .portfolio-compact .filter-links{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:-22px;margin-bottom:14px;padding:0 22px 4px;scrollbar-width:none}
  .portfolio-compact .filter-links::-webkit-scrollbar{display:none}
  .portfolio-compact .filter-links a{font-size:14.5px;padding:8px 14px}
  .portfolio-compact .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .portfolio-compact .portfolio-grid img{height:150px;padding:8px}
  .portfolio-compact .portfolio-grid figcaption{padding:10px 10px 12px}
  .portfolio-compact .portfolio-grid h3{font-size:14.5px}
  .portfolio-compact .portfolio-grid figcaption>p:not(.eyebrow){font-size:12.5px}
  .portfolio-compact .portfolio-grid .story-link{font-size:13.5px}
}