/* ps-ui.css: shadcn-style consistency layer for repeated content components.
   The navigation and page content hierarchy are left as they are.
   Cards are white on the page background, 16px radius, no outline. */

:root{
  --ui-card:#ffffff;
  --ui-muted:#f1f4f8;
  --ui-line:#e5e8ee;
  --ui-ink:#202020;
  --ui-muted-fg:#5a6372;
  --ui-r-lg:16px;
  --ui-r-md:12px;
  --ui-r-sm:10px;
  --ui-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --ui-shadow-hover:0 2px 4px rgba(16,24,40,.06),0 8px 20px -8px rgba(16,24,40,.12);
}

/* Buttons: same 10px radius as the navigation call to action */
html body a.button,
html body .button{border-radius:var(--ui-r-sm) !important;min-height:44px}

/* Project cards on Home and Work */
html body .evidence-work-item > a{background:var(--ui-card);border-radius:var(--ui-r-lg);padding:12px;box-shadow:var(--ui-shadow);
  transition:box-shadow .2s ease}
html body .evidence-work-item > a:hover{box-shadow:var(--ui-shadow-hover)}
html body .evidence-work-image{background:var(--ui-muted) !important;border-radius:var(--ui-r-md) !important}
html body .evidence-work-copy{padding-right:12px}

/* Contribution cards */
html body .delivery-points article{background:var(--ui-card) !important;border-radius:var(--ui-r-lg) !important;box-shadow:var(--ui-shadow);border:0 !important}

/* Hero name separator readable at 4.5:1 */
html body .editorial-identity > span{color:#626b78 !important}

/* Tinted bands share one fill */
html body .interview-strip{background:var(--ui-muted) !important}

/* Notes that used a side stripe become quiet cards */
html body .delivery-note,
html body .scope-policy,
html body .pg-choice{border-left:0 !important;background:var(--ui-card) !important;border-radius:var(--ui-r-lg) !important;
  box-shadow:var(--ui-shadow);padding:20px 24px !important}

/* Separators: light hairlines instead of near-black rules */
html body .decision-trade,
html body .figma-evidence.decision-story,
html body .scope-row,
html body .avatar-decision,
html body .decision-block,
html body .pg-ownership,
html body .pg-related{border-top-color:var(--ui-line) !important}

/* Figures and captures: no outline, consistent radius */
html body .decision-graphic{border:0 !important;background:var(--ui-card) !important;border-radius:var(--ui-r-lg) !important;box-shadow:var(--ui-shadow)}
html body .pg-capture a,
html body a[class*="capture"]{border:0 !important;border-radius:var(--ui-r-md) !important;background:var(--ui-muted) !important}
html body .avatar-model,
html body .pg-hero{border-radius:var(--ui-r-lg) !important}

/* More projects footer on case studies */
html body nav.next-work{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch !important;border-top-color:var(--ui-line) !important}
html body nav.next-work > a{display:grid !important;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px;row-gap:14px;align-items:end;
  background:var(--ui-card);border:0 !important;border-radius:var(--ui-r-lg);padding:20px 22px !important;box-shadow:var(--ui-shadow);
  text-decoration:none;transition:box-shadow .2s ease}
html body nav.next-work > a:hover{box-shadow:var(--ui-shadow-hover)}
html body nav.next-work .next-logo{grid-column:1 / -1;display:flex !important;align-items:center;height:34px;margin:0 !important;background:none !important;border-radius:0 !important;padding:0 !important;width:auto !important}
html body nav.next-work .next-logo img{display:block;height:34px !important;width:auto !important;max-width:140px;object-fit:contain;border-radius:0 !important;box-shadow:none !important;background:none !important}
html body nav.next-work > a > span[aria-hidden="true"]{grid-column:2;grid-row:2;transition:transform .15s ease}
html body nav.next-work > a:hover > span[aria-hidden="true"]{transform:translateX(4px)}
html body nav.next-work .next-logo img[alt="Unlock"]{height:20px !important}
html body nav.next-work > a{align-self:stretch !important}
@media (max-width:760px){html body nav.next-work{grid-template-columns:1fr}}

/* Project cards: 3D cover artwork on every breakpoint */
html body .evidence-work-image{display:block !important;padding:0 !important;overflow:hidden !important;border-radius:var(--ui-r-md) !important;background:var(--ui-muted) !important;align-self:start}
html body .evidence-work-image > :not(.approved-mobile-cover){display:none !important}
html body .evidence-work-image > .approved-mobile-cover{display:block !important;position:static !important;inset:auto !important;width:100% !important;height:auto !important;max-width:100% !important;aspect-ratio:3 / 2 !important;object-fit:cover !important;transform:none !important;border:0 !important;border-radius:0 !important;padding:0 !important;margin:0 !important;box-shadow:none !important}

@media (prefers-reduced-motion:reduce){
  html body .evidence-work-item > a,
  html body nav.next-work > a,
  html body nav.next-work > a > span[aria-hidden="true"]{transition:none}
}

/* Desktop navigation: floating island uses a standard 1200px container when the page scrolls */
@media (min-width:761px){
  html body.nav-compact .portfolio-navigation .island{width:min(1200px, 100% - 48px) !important}
}

/* Smooth page to page transitions: the navigation morphs instead of jumping */
@view-transition{navigation:auto}
html body .portfolio-navigation .island{view-transition-name:ps-nav}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
::view-transition-group(ps-nav){animation-duration:.28s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* Footer: email and LinkedIn as filled icons */
html body footer .footer-inner > div:has(.ps-icon-link){display:flex !important;align-items:center;flex-wrap:wrap;column-gap:4px}
html body footer .ps-icon-link{display:inline-flex !important;align-items:center;justify-content:center;width:44px;height:44px;margin:0 !important;padding:0 !important;border-radius:10px;color:inherit;transition:color .15s ease,background-color .15s ease}
html body footer .ps-icon-link svg{width:22px;height:22px;display:block}
html body footer .ps-icon-link:hover{background-color:rgba(255,255,255,.08)}
html body footer .ps-icon-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* About: tool stack, a static logo grid */
html body .ps-stack{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:8px}
html body .ps-stack li{display:flex;align-items:center;gap:12px;min-height:56px;margin:0;padding:0 14px;background:var(--ui-card);border-radius:var(--ui-r-md);font-size:.9375rem;line-height:1.3;color:var(--ui-ink)}
html body .ps-stack li::before{content:none}
html body .ps-stack svg,html body .ps-stack img{width:28px;height:28px;flex:none;border-radius:6px}
@media (max-width:560px){
  html body .ps-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .ps-stack li{padding:0 12px;gap:10px;font-size:.875rem}
}

/* Remove the blue hover glow on cards: flat surfaces only */
html body .ps-glow{display:none !important}