.portfolio-main,
.portfolio-page {
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    padding: 0;
}

.portfolio-page h1,
.portfolio-page h2,
.portfolio-page h3,
.portfolio-page strong,
.portfolio-page button,
.portfolio-page .portfolio-dialog__cta,
.portfolio-page .portfolio-cta a {
    text-transform: uppercase;
}

.portfolio-section__inner,
.portfolio-hero__inner {
    inline-size: calc(100% - (2 * var(--gutter-page)));
    max-inline-size: var(--container-main);
    min-inline-size: 0;
    margin-inline: auto;
}

.portfolio-hero { background: var(--color-bg-primary); }
.portfolio-hero__inner { display: grid; }
.portfolio-hero__copy { display: flex; padding-block: clamp(3rem, 7vw, 5rem); flex-direction: column; justify-content: center; }
.portfolio-hero h1 { margin-block-end: var(--space-lg); font-size: clamp(2.6rem, 7vw, 4.5rem); line-height: .95; letter-spacing: -.04em; }
.portfolio-hero__copy p { max-inline-size: 42ch; font-size: clamp(1rem, .94rem + .25vw, 1.16rem); }
.portfolio-hero__project { min-inline-size: 0; block-size: 34rem; background: var(--color-bg-surface); border-block-start: 1px solid; }
.portfolio-hero__project > a { display: grid; block-size: 100%; grid-template-rows: minmax(0, 1fr) auto; color: inherit; text-decoration: none; }
.portfolio-hero__frame { display: block; min-block-size: 26rem; overflow: hidden; }
.portfolio-hero__frame img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; transition: transform 220ms var(--ease-standard); }
.portfolio-hero__meta { display: grid; padding: var(--space-md) var(--space-lg); grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xs) var(--space-lg); border-block-start: 1px solid; }
.portfolio-hero__meta strong { font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + .4vw, 1.4rem); }
.portfolio-hero__meta small { grid-column: 1; font-size: .78rem; }
.portfolio-hero__meta i { grid-column: 2; grid-row: 1 / 3; color: var(--color-accent); font-style: normal; transition: transform 200ms var(--ease-standard); }

.portfolio-featured { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--color-bg-surface); }
.portfolio-featured h2,
.portfolio-archive h2,
.portfolio-cta h2 { margin-block-end: clamp(2rem, 5vw, 4rem); font-size: clamp(2.1rem, 4.5vw, 3.7rem); line-height: .96; letter-spacing: -.035em; }
.portfolio-featured__grid { display: grid; gap: var(--space-lg); }

.project-card { min-inline-size: 0; }
.project-card__trigger { display: grid; inline-size: 100%; block-size: 100%; padding: 0; grid-template-rows: minmax(0, 1fr) auto; background: var(--color-bg-surface); color: inherit; border: 1px solid; border-radius: 0; font: inherit; text-align: start; text-decoration: none; cursor: pointer; transition: background 200ms var(--ease-standard), border-color 200ms var(--ease-standard); }
.project-card__frame { display: block; min-inline-size: 0; overflow: hidden; background: var(--color-bg-primary); border-block-end: 1px solid; }
.project-card__frame img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; transition: transform 220ms var(--ease-standard); }
.project-card__body { display: grid; min-inline-size: 0; padding: var(--space-md); grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); }
.project-card__body > span { display: grid; min-inline-size: 0; gap: var(--space-2xs); }
.project-card__body strong { overflow-wrap: break-word; font-family: var(--font-display); font-size: clamp(.98rem, .92rem + .25vw, 1.15rem); line-height: 1.05; }
.project-card__body small { font-size: .72rem; text-transform: none; }
.project-card__body i { color: var(--color-accent); font-style: normal; transition: transform 200ms var(--ease-standard); }
.project-card--featured .project-card__frame { block-size: clamp(20rem, 32vw, 27rem); }
.project-card--archive .project-card__frame { block-size: clamp(17rem, 25vw, 22rem); }

.portfolio-archive { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--color-bg-primary); }
.portfolio-archive__header { display: grid; margin-block-end: var(--space-xl); gap: var(--space-lg); }
.portfolio-archive__header h2 { margin: 0; }
.portfolio-filters { display: none; max-inline-size: 100%; overflow-x: auto; scrollbar-width: thin; }
.portfolio-enhanced .portfolio-filters { display: flex; }
.portfolio-filters button { min-block-size: 44px; padding: var(--space-sm) var(--space-md); flex: 0 0 auto; background: transparent; color: inherit; border: 0; border-block-end: 1px solid; font-family: var(--font-display); font-size: .75rem; font-weight: 800; cursor: pointer; }
.portfolio-filters button[aria-pressed="true"] { background: var(--color-bg-dark); color: var(--color-text-inverse); }
.portfolio-archive__grid { display: grid; gap: var(--space-lg); }
.portfolio-load-more { display: none; min-block-size: 48px; margin: var(--space-xl) auto 0; padding: var(--space-sm) var(--space-xl); align-items: center; justify-content: space-between; gap: var(--space-lg); background: var(--color-bg-dark); color: var(--color-text-inverse); border: 1px solid var(--color-bg-dark); font-family: var(--font-display); font-size: .78rem; font-weight: 800; cursor: pointer; }
.portfolio-enhanced .portfolio-load-more:not([hidden]) { display: flex; }

.portfolio-cta { background: var(--color-bg-brand); color: var(--color-text-inverse); }
.portfolio-cta__inner { display: grid; min-block-size: 22rem; padding-block: clamp(3rem, 6vw, 4.5rem); align-items: center; gap: var(--space-xl); }
.portfolio-cta h2 { margin: 0; }
.portfolio-cta__inner > div { max-inline-size: 34rem; }
.portfolio-cta p { margin-block-end: var(--space-lg); }
.portfolio-cta a, .portfolio-dialog__cta { display: inline-flex; min-block-size: 48px; padding: var(--space-sm) var(--space-lg); align-items: center; justify-content: space-between; gap: var(--space-lg); background: var(--color-bg-dark); color: var(--color-text-inverse); border: 1px solid var(--color-bg-dark); font-family: var(--font-display); font-size: .78rem; font-weight: 800; text-decoration: none; }
.portfolio-cta a span, .portfolio-dialog__cta span { color: var(--color-accent); transition: transform 200ms var(--ease-standard); }

.portfolio-dialog { inline-size: min(960px, calc(100vw - (2 * var(--gutter-page)))); max-inline-size: none; max-block-size: calc(100svh - (2 * var(--gutter-page))); padding: 0; overflow: hidden; background: var(--color-bg-surface); color: var(--color-text-primary); border: 1px solid; border-radius: 0; }
.portfolio-dialog::backdrop { background: #111111d9; }
.portfolio-dialog__close { position: absolute; inset: var(--space-md) var(--space-md) auto auto; z-index: 2; display: inline-flex; min-block-size: 44px; padding: var(--space-xs) var(--space-sm); align-items: center; gap: var(--space-sm); background: var(--color-bg-dark); color: var(--color-text-inverse); border: 1px solid var(--color-bg-dark); font-family: var(--font-display); font-size: .72rem; font-weight: 800; cursor: pointer; }
.portfolio-dialog__close span { color: var(--color-accent); font-size: 1.2rem; }
.portfolio-dialog__layout { display: grid; inline-size: 100%; min-inline-size: 0; max-block-size: calc(100svh - (2 * var(--gutter-page))); overflow-x: hidden; }
.portfolio-dialog__screenshot { min-inline-size: 0; max-inline-size: 100%; block-size: 60svh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--color-bg-primary); border-block-start: 1px solid; scrollbar-width: thin; }
.portfolio-dialog__screenshot img { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; }
.portfolio-dialog__content { display: flex; min-inline-size: 0; max-inline-size: 100%; padding: clamp(2rem, 5vw, 4rem) var(--space-lg) var(--space-xl); flex-direction: column; align-items: flex-start; overflow-x: hidden; overflow-y: auto; }
.portfolio-dialog__content > * { max-inline-size: 100%; }
.portfolio-dialog h2 { max-inline-size: 14ch; margin-block-end: var(--space-md); font-size: clamp(1.8rem, 4vw, 3rem); line-height: .96; overflow-wrap: anywhere; }
.portfolio-dialog__meta { margin-block-end: var(--space-md); font-size: .78rem; }
.portfolio-dialog__url { max-inline-size: 100%; margin-block-end: var(--space-lg); color: var(--color-text-brand); font-size: .82rem; overflow-wrap: anywhere; }
.portfolio-dialog__description { max-inline-size: 48ch; margin-block-end: var(--space-xl); overflow-wrap: break-word; }
.portfolio-dialog__cta { margin-block-start: auto; white-space: normal; }
.portfolio-dialog__url[hidden],
.portfolio-dialog__cta[hidden] { display: none; }
body.portfolio-dialog-open { overflow: hidden; }

@media (hover: hover) and (pointer: fine) {
    .portfolio-hero__project:hover img,
    .portfolio-hero__project:focus-within img,
    .project-card:hover img,
    .project-card:focus-within img { transform: scale(1.015); }
    .portfolio-hero__project:hover i,
    .portfolio-hero__project:focus-within i,
    .project-card:hover i,
    .project-card:focus-within i,
    .portfolio-cta a:hover span,
    .portfolio-cta a:focus-visible span,
    .portfolio-dialog__cta:hover span,
    .portfolio-dialog__cta:focus-visible span { transform: translate(4px, -4px); }
    .project-card:hover .project-card__trigger { background: var(--color-bg-primary); border-color: var(--color-bg-brand); }
}

@media (min-width: 40rem) {
    .portfolio-featured__grid,
    .portfolio-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-card--featured .project-card__frame,
    .project-card--archive .project-card__frame { block-size: 20rem; }
    .portfolio-archive__header { grid-template-columns: 1fr auto; align-items: end; }
    .portfolio-cta__inner { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
    .portfolio-hero__inner { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); block-size: clamp(34rem, 68svh, 40rem); }
    .portfolio-hero__copy { padding-inline: clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 5vw, 5rem); }
    .portfolio-hero__project { min-block-size: 0; block-size: auto; border-block-start: 0; border-inline-start: 1px solid; }
    .portfolio-hero__frame { min-block-size: 0; }
    .portfolio-featured__grid,
    .portfolio-archive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .project-card--featured .project-card__frame,
    .project-card--archive .project-card__frame { block-size: 18rem; }
    .portfolio-dialog__layout { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
    .portfolio-dialog__screenshot { block-size: auto; max-block-size: calc(100svh - (2 * var(--gutter-page))); border-block-start: 0; border-inline-end: 1px solid; }
    .portfolio-dialog__content { min-block-size: min(38rem, calc(100svh - (2 * var(--gutter-page)))); padding: clamp(4rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem) var(--space-xl); }
}

@media (min-width: 75rem) {
    .portfolio-featured__grid,
    .portfolio-archive__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .project-card--featured .project-card__frame,
    .project-card--archive .project-card__frame { block-size: 16rem; }
}

@media (max-width: 47.999rem) {
    .portfolio-page [data-reveal="right"] { --reveal-x: 0; --reveal-y: 18px; }
    .portfolio-section__inner,
    .portfolio-hero__inner { inline-size: calc(100% - (2 * var(--space-md))); }
    .portfolio-hero__project { margin-inline: calc(-1 * var(--space-md)); }
    .portfolio-hero__frame { min-block-size: 25rem; }
    .portfolio-filters { margin-inline-end: calc(-1 * var(--space-md)); }
    .portfolio-cta a,
    .portfolio-dialog__cta { inline-size: 100%; }
    .portfolio-dialog { inline-size: calc(100vw - (2 * var(--space-md))); max-block-size: calc(100svh - (2 * var(--space-md))); }
    .portfolio-dialog__layout { max-block-size: calc(100svh - (2 * var(--space-md))); overflow-y: auto; }
    .portfolio-dialog__content { grid-row: 1; padding-block-start: 4.5rem; }
    .portfolio-dialog__screenshot { grid-row: 2; block-size: 58svh; }
}

@media (max-width: 22rem) {
    .portfolio-hero h1 { font-size: 2.35rem; }
    .portfolio-featured h2,
    .portfolio-archive h2,
    .portfolio-cta h2 { font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-hero__frame img,
    .portfolio-hero__meta i,
    .project-card__trigger,
    .project-card__frame img,
    .project-card__body i,
    .portfolio-cta a span,
    .portfolio-dialog__cta span { transition: none; }
}