main[data-page=work-index] .portfolio{background-color:var(--color-bg-alt);padding-block:clamp(3.25rem,6.2vw,5.5rem) clamp(4rem,8.4vw,7.5rem);position:relative}main[data-page=work-index] .portfolio .section-header--centered{align-items:end;display:grid;gap:clamp(.75rem,3.4vw,3rem);margin-inline:0;max-width:none;text-align:left}@media (min-width:64em){main[data-page=work-index] .portfolio .section-header--centered{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto}main[data-page=work-index] .portfolio .section-header__topper{align-self:end;grid-column:1;grid-row:1}main[data-page=work-index] .portfolio .section-header__title{grid-column:1;grid-row:2}main[data-page=work-index] .portfolio .section-header__description{align-self:end;grid-column:2;grid-row:1/span 2}}main[data-page=work-index] .portfolio .section-header__title{font-size:clamp(2.375rem,4.4vw,4.25rem);line-height:1.05;margin:0}main[data-page=work-index] .portfolio .section-header__description{color:var(--color-text-muted);font-size:clamp(1rem,.95rem + .3vw,1.125rem);margin:0;text-wrap:pretty}main[data-page=work-index] .portfolio__grid{display:grid;gap:clamp(2rem,3.4vw,3rem);list-style:none;margin-top:clamp(2rem,4vw,3.5rem);padding:0}@media (min-width:60em){main[data-page=work-index] .portfolio__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}main[data-page=work-index] .portfolio-card{background-color:var(--color-surface);border:3px solid var(--color-accent);border-radius:18px;box-shadow:0 24px 48px rgba(10,2,24,.18);gap:0;overflow:hidden;padding:0;transition:box-shadow var(--transition-base)}main[data-page=work-index] .portfolio-card:hover{box-shadow:0 28px 56px rgba(10,2,24,.26);transform:none}main[data-page=work-index] .browser-frame--titled{background-color:transparent;border:0;border-radius:0;box-shadow:none;padding:0}main[data-page=work-index] .browser-frame--titled .browser-frame__bar{background-color:var(--color-accent);border-bottom:0;border-radius:0;display:block;padding:.625rem var(--space-md);text-align:center}main[data-page=work-index] .browser-frame__title{color:var(--color-btn-primary-text);font-family:var(--font-heading);font-size:clamp(1rem,1.2vw,1.125rem);letter-spacing:.04em}main[data-page=work-index] .browser-frame--titled picture{display:block}main[data-page=work-index] .browser-frame--titled .browser-frame__screenshot{aspect-ratio:16/10;border-bottom:3px solid var(--color-accent);border-radius:0;display:block;height:auto;-o-object-fit:cover;object-fit:cover;-o-object-position:top center;object-position:top center;width:100%}main[data-page=work-index] .portfolio-card__content{gap:.875rem;padding:clamp(1.375rem,2.4vw,2rem) clamp(1.25rem,2.6vw,2.25rem) clamp(1.5rem,2.8vw,2.25rem)}main[data-page=work-index] .portfolio-card__title{color:var(--color-primary);font-family:var(--font-heading);font-size:clamp(1.625rem,2.6vw,2.375rem);font-weight:400;line-height:1.1;margin:0}main[data-page=work-index] .portfolio-card__facts{display:flex;flex-wrap:wrap;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:.375rem;list-style:none;margin:0;padding:0}main[data-page=work-index] .portfolio-card__fact{background-color:var(--color-accent-light);border:1px solid var(--color-border-light);border-radius:var(--radius-full);color:var(--color-text);line-height:1.3;padding:.25rem .625rem}@media (min-width:48em){main[data-page=work-index] .portfolio-card__facts{font-size:.9375rem;gap:.375rem .75rem}main[data-page=work-index] .portfolio-card__fact{background-color:transparent;border:0;border-radius:0;color:var(--color-text-muted);padding:0}main[data-page=work-index] .portfolio-card__fact:not(:last-child):after{color:var(--color-accent-ink);content:"·";margin-left:.75rem}}main[data-page=work-index] .portfolio-card__description{color:var(--color-text);font-size:var(--font-size-base);line-height:1.625;margin:0;text-wrap:pretty}main[data-page=work-index] .portfolio-card__button.button--primary{align-self:flex-start;background-color:transparent;border-radius:0;box-shadow:none;color:var(--color-accent-ink);display:inline;font-family:var(--font-sans);font-size:1.0625rem;font-weight:var(--font-weight-bold);margin-block-start:.5rem;min-width:0;padding:0;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}main[data-page=work-index] .portfolio-card__button.button--primary:after{content:"\00a0→"}main[data-page=work-index] .portfolio-card:hover .portfolio-card__button.button--primary{background-color:transparent;box-shadow:none;color:var(--color-accent-ink);transform:none}