/* Portfolio refinement: retain the original image-led composition. */
.portfolio-page { background:#f4f7f7; }
.portfolio-page .page-hero { max-width:1020px; padding-top:64px; padding-bottom:42px; }
.portfolio-page .page-hero h1 { font-size:clamp(46px,6.4vw,82px); max-width:22ch; }
.portfolio-page .page-hero>p:last-child { max-width:64ch; font-size:18px; }
.portfolio-page .project-grid { gap:28px; }
.portfolio-page .project-card {
  display:flex; flex-direction:column; gap:0; padding:0;
  border:0; border-radius:14px; overflow:hidden; background:#eaf0f0;
  transition:transform .38s ease,box-shadow .38s ease;
}
.portfolio-page .project-card.project-featured {
  display:grid; grid-column:1/-1; grid-template-columns:1.15fr .85fr; align-items:stretch;
}
.portfolio-page .project-card .project-visual {
  padding:0; overflow:hidden; background:#dfe8e8; display:block;
}
.portfolio-page .project-visual img {
  display:block; width:100%; height:320px; object-fit:cover;
  filter:saturate(1); transition:transform .65s cubic-bezier(.2,.65,.3,1),filter .65s;
}
.portfolio-page .project-featured .project-visual img { height:100%; min-height:440px; }
.portfolio-page .project-card>div:not(.project-visual) {
  display:flex; flex-direction:column; justify-content:center; padding:30px;
}
.portfolio-page .project-card h2 {
  font:700 clamp(32px,3.1vw,44px)/1.02 Barlow,Impact,sans-serif;
  max-width:19ch; letter-spacing:-.02em; margin:12px 0 0;
}
.portfolio-page .project-card p:not(.kicker) { margin:18px 0 0; color:#526267; max-width:53ch; }
.portfolio-page .project-card .kicker { margin:0; }
.portfolio-page .project-tags { gap:7px; margin:22px 0 0; }
.portfolio-page .project-tags li { font-size:10px; background:#f4f8f8; padding:6px 8px; }
.portfolio-page .compact-cta h2 { max-width:24ch; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  html:not(.is-paused) .portfolio-page .project-card:hover { transform:translateY(-6px); box-shadow:0 18px 36px -16px rgba(15,45,50,.32); }
  html:not(.is-paused) .portfolio-page .project-card:hover img { transform:scale(1.065); filter:saturate(1); }
}
html.is-paused .portfolio-page .project-visual img { transition:none; transform:none; }
@media(prefers-reduced-motion:reduce) { .portfolio-page .project-visual img { transition:none; transform:none; } }
@media(max-width:760px) {
  .portfolio-page .page-hero { padding-top:36px; padding-bottom:26px; }
  .portfolio-page .page-hero h1 br { display:none; }
  .portfolio-page .page-hero>p:last-child { font-size:16px; }
  .portfolio-page .section { padding-top:30px; padding-bottom:36px; }
  .portfolio-page .project-grid { gap:22px; }
  .portfolio-page .project-card.project-featured { grid-column:auto; grid-template-columns:1fr; }
  .portfolio-page .project-visual img { height:auto; aspect-ratio:4/3; }
  .portfolio-page .project-featured .project-visual img { height:auto; min-height:0; aspect-ratio:4/3; }
  .portfolio-page .project-card>div:not(.project-visual) { padding:24px; }
  .portfolio-page .project-card h2 { font-size:34px; max-width:none; }
}

html.is-paused .portfolio-page .project-card { transition:none; transform:none; box-shadow:none; }
@media(prefers-reduced-motion:reduce) { .portfolio-page .project-card { transition:none; transform:none; box-shadow:none; } }
/* Deep links identify the project and clear the persistent navigation. */
.portfolio-page .project-card[id] { scroll-margin-top:calc(var(--header-height,64px) + 24px); }
.portfolio-page .project-card:target { outline:2px solid #087b92; outline-offset:5px; }

.portfolio-page .page-hero .project-image-note { font-size:13px; color:var(--muted); margin-top:18px; }
@media(max-width:760px) { .portfolio-page .project-visual img,.portfolio-page .project-featured .project-visual img { aspect-ratio:3/2; } }

.portfolio-page .project-visual { position:relative; }