.portfolio { min-block-size: 60vh; }
.portfolio-wrap { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }
.portfolio-intro { padding-block: clamp(3.75rem, 9vw, 7.5rem); background: var(--surface-soft, #e9eddf); border-block-end: 1px solid var(--line, #dfe4d8); }
.portfolio-intro h1 { max-inline-size: 17ch; font-size: clamp(2.65rem, 7vw, 6rem); letter-spacing: -.06em; line-height: 1.03; }
[dir="rtl"] .portfolio-intro h1 { letter-spacing: normal; line-height: 1.25; }
.portfolio-intro p { max-inline-size: 52ch; margin-block-start: 1.2rem; color: var(--muted, #56635d); font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.65; }
.portfolio-entries { padding-block: clamp(2.75rem, 6vw, 5rem); }
.portfolio-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: clamp(1rem, 3vw, 2rem); align-items: start; }
.portfolio-grid .cms-card { padding: 0; overflow: hidden; background: var(--surface, #fff); }
.portfolio-grid .cms-card img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; margin: 0; object-fit: cover; border-radius: 0; }
.portfolio-grid .cms-card-copy { padding: clamp(1.25rem, 2.5vw, 2rem); }
.portfolio-grid h3 { font-size: clamp(1.3rem, 2.5vw, 1.65rem); line-height: 1.25; overflow-wrap: anywhere; }
.portfolio-grid .cms-card-copy p { color: var(--muted, #56635d); line-height: 1.65; overflow-wrap: anywhere; }
.portfolio-grid summary { color: var(--ink, #23362e); }
.portfolio [role="status"] { color: var(--muted, #56635d); }
.portfolio-footer { padding-block: 2.25rem; }
.portfolio-footer .portfolio-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.portfolio-footer a { font-weight: 600; }
.portfolio-footer a:hover, .header nav [aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }