/* V3: generous introduction, then a two-column index of all work. */
:root { --v3-inset:2.35vw; --v3-progress:0; }
html { scroll-behavior:auto; }
body { background:#FAFAFA; }
.v3-header { position:fixed; inset:0 0 auto; height:56px; z-index:30; pointer-events:none; }
.v3-header::before { content:""; position:absolute; inset:0; background:#FAFAFA; opacity:var(--v3-progress); }
.v3-info { position:absolute; top:24px; right:var(--v3-inset); pointer-events:auto; font:400 20px/1.4 Inter,var(--sans); letter-spacing:-.025em; }
.v3-info:hover { color:#D8576C; }
.v3-intro { position:fixed; top:22px; left:var(--v3-inset); width:88vw; z-index:31; pointer-events:none; transform-origin:top left; will-change:transform; }
.v3-intro h1 { font-family:var(--sans); font-weight:300; font-size:clamp(30px,3.1vw,68px); line-height:1.22; letter-spacing:-.025em; margin:0; }
.v3-name { font-family:Inter,var(--sans); font-weight:300; }
.v3-statement,.v3-surname { opacity:1; }
.v3-home { display:none; position:absolute; inset:0 auto auto 0; width:4.6em; height:1.3em; font-size:clamp(30px,3.1vw,68px); pointer-events:auto; }
/* Place the filter row at the bottom of the opening viewport. */
.v3-work { padding: calc(100svh - 58px) var(--v3-inset) 48px; }
.v3-work .work-grid { gap:48px 36px; }
.v3-work .pcard .ph { aspect-ratio:1.35; }
.v3-work .project-info { padding-top:16px; }
@media(max-width:780px) {
 :root { --v3-inset:20px; }
 .v3-intro { top:24px; width:calc(100vw - 70px); }
 .v3-intro h1 { font-size:clamp(28px,5.4vw,42px); }
 .v3-info { font-size:20px; right:20px; top:26px; }
 .v3-work { padding-top:calc(100svh - 58px); }
 .v3-work .work-grid { grid-template-columns:1fr; gap:32px; }
}
@media(prefers-reduced-motion:reduce) { .v3-intro { will-change:auto; } }

@media(min-width:781px) { .v3-intro h1 { white-space:nowrap; } }
@media(max-width:780px) { .v3-break { display:none; } }

/* Match the homepage footer to the About navigation link. */
.portfolio-footer { background:#FAFAFA; font:400 18px/1.4 Inter,var(--sans); letter-spacing:normal; color:#000; text-transform:none; }
@media(max-width:780px) { .portfolio-footer { font-size:15px; } }

.v3-work .pcard .t { font-family:Inter,var(--sans); font-weight:500; }

#home-dust { position:fixed; inset:0; pointer-events:none; z-index:9998; }

.v3-project-filters { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px; position:sticky; top:64px; z-index:25; font:400 17px/1.5 Inter,var(--sans); width:fit-content; background:#FAFAFA; }
.v3-project-filters button { position:relative; padding:4px 7px; border:0; background:transparent; color:#000; font:inherit; isolation:isolate; transition:color .18s ease; }
.v3-project-filters button::before { content:""; position:absolute; inset:auto 0 0; height:0; background:#D8576C; z-index:-1; transition:height .24s cubic-bezier(.3,.7,.2,1); }
.v3-project-filters button[aria-pressed="true"] { color:#D8576C; }
.v3-project-filters button:hover { color:#fff; }
.v3-project-filters button:hover::before { height:100%; }
.v3-work .pcard[hidden] { display:none; }
@media(prefers-reduced-motion:reduce) { .v3-project-filters button,.v3-project-filters button::before { transition:none; } }

@media(max-width:780px) {
  .v3-project-filters { position:relative; top:auto; margin-bottom:10px; }
}

.v3-project-filters { justify-content:flex-start; text-align:left; margin-left:0; }
.v3-project-filters button:first-child { padding-left:0; }

.intro-ripple-word { display:inline-block; }

.intro-ripple-letter { display:inline-block; transform-origin:50% 75%; }