/* Large, image-led cards based on the supplied portfolio reference. */
.portfolio__heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:clamp(2rem,4vw,4rem)}
.portfolio__heading h2{font-family:var(--font-display);line-height:.9;text-transform:uppercase}
.portfolio__heading p{max-width:30ch;color:var(--lilac);font-size:var(--fs-body)}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.3rem,2.5vw,2.5rem)}
.portfolio-card{display:block;min-width:0;text-align:left;width:100%}
.portfolio-card__visual{display:block;position:relative;aspect-ratio:5/6;overflow:hidden;border-radius:8px;background:var(--dark-2)}
.portfolio-card__visual img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease),filter .4s}
.portfolio-card[data-gallery="websites"]{grid-column:1/-1}
.portfolio-card[data-gallery="websites"] .portfolio-card__visual{aspect-ratio:2.35/1}
.portfolio-card[data-gallery="websites"] .portfolio-card__visual img{object-fit:contain;padding:1.25rem}
.portfolio-card__arrow{position:absolute;top:1.25rem;right:1.25rem;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(13,7,22,.86);color:var(--paper);font-size:1.7rem;transition:background .3s}
.portfolio-card:hover .portfolio-card__visual img,.portfolio-card:focus-visible .portfolio-card__visual img{transform:scale(1.035);filter:brightness(.8)}
.portfolio-card:hover .portfolio-card__arrow,.portfolio-card:focus-visible .portfolio-card__arrow{background:var(--magenta)}
.portfolio-card__meta{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-top:1rem}
.portfolio-card__title{font-size:clamp(1.4rem,2.1vw,2.1rem);font-weight:500;letter-spacing:-.04em}
.portfolio-card__count{font-size:var(--fs-mini);color:var(--lilac);white-space:nowrap}
.portfolio-card__description{display:block;margin-top:.35rem;font-size:var(--fs-small);opacity:.75}

/* The native dialog keeps focus and Escape while the media floats above the page. */
html.gallery-open,body.gallery-open{overflow:hidden}
.gallery{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;padding:0;border:0;background:transparent;color:var(--paper);overflow:hidden}
.gallery::backdrop{background:rgba(0,0,0,.84);backdrop-filter:blur(5px)}
.gallery[open]{display:grid;place-items:center}
.gallery__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gallery__content{position:relative;width:100%;height:100%;display:grid;place-items:center}
.gallery__stage{width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.gallery__visual{grid-area:1/1;display:block;width:auto;height:auto;max-width:min(88vw,1200px);max-height:82dvh;object-fit:contain;filter:drop-shadow(0 24px 48px rgba(0,0,0,.4));animation:galleryMorphIn .7s var(--ease) both}
.gallery__stage video{width:min(46.125dvh,88vw);aspect-ratio:9/16}
.gallery__visual.is-exiting{pointer-events:none;animation:galleryMorphOut .7s var(--ease) both}
@keyframes galleryMorphIn{0%{opacity:0;clip-path:inset(24% 28% round 45%);transform:scale(.86)}55%{opacity:.85;clip-path:inset(5% 7% round 18%);transform:scale(1.025)}100%{opacity:1;clip-path:inset(0 round 0);transform:scale(1)}}
@keyframes galleryMorphOut{0%{opacity:1;clip-path:inset(0 round 0);transform:scale(1)}100%{opacity:0;clip-path:inset(24% 28% round 45%);transform:scale(1.12)}}
.gallery__close,.gallery__navigation button{display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(16,8,24,.64);color:#fff;backdrop-filter:blur(8px)}
.gallery__close{position:fixed;z-index:2;top:clamp(14px,3vw,34px);right:clamp(14px,3vw,34px);width:52px;height:52px;font-size:2rem;line-height:1}
.gallery__close:hover,.gallery__navigation button:not(:disabled):hover{background:var(--magenta);border-color:var(--magenta)}
.gallery__navigation{position:fixed;z-index:1;left:clamp(12px,3vw,42px);right:clamp(12px,3vw,42px);top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;pointer-events:none}
.gallery__navigation button{pointer-events:auto;width:54px;height:54px;font-size:1.5rem}
.gallery__navigation button:disabled{opacity:.25;cursor:default}
.gallery__counter{position:fixed;bottom:clamp(18px,3vw,34px);left:50%;transform:translateX(-50%);font-size:var(--fs-mini);font-variant-numeric:tabular-nums;color:#fff;background:rgba(16,8,24,.64);border-radius:24px;padding:.4rem .8rem;backdrop-filter:blur(8px)}
.gallery__error{padding:2rem;text-align:center;line-height:1.6}
.gallery__error a{text-decoration:underline}
@media(max-width:850px){
  .portfolio__heading{align-items:start;flex-direction:column;gap:.75rem}
  .portfolio__heading p{max-width:45ch}
  .portfolio-grid{grid-template-columns:1fr;gap:2rem}
  .portfolio-card__visual{aspect-ratio:5/6}
  .portfolio-card[data-gallery="websites"]{grid-column:auto}
  .portfolio-card[data-gallery="websites"] .portfolio-card__visual{aspect-ratio:3/2}
  .gallery__visual{max-width:94vw;max-height:78dvh}
  .gallery__close{width:44px;height:44px}
  .gallery__navigation{left:8px;right:8px}
  .gallery__navigation button{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .portfolio-card__visual img,.portfolio-card__arrow{transition:none}
  .gallery__visual,.gallery__visual.is-exiting{animation:none}
}