/* An image-led gallery: persistent controls, one photograph, compact scope. */
.portfolio-page { --gutter: clamp(24px, 3.35vw, 64px); --portfolio-paper: #eef0f0; --portfolio-ink: #202527; --portfolio-muted: #586166; --portfolio-line: #bcc3c6; background: #0b0e10; }
.portfolio-page main { --red: #c51d32; background: var(--portfolio-paper); color: var(--portfolio-ink); color-scheme: light; }
.portfolio-page .header { background: #0b0e10; }
.portfolio-page .desktop-nav a[aria-current="page"], .portfolio-page .mobile-nav a[aria-current="page"] { color: var(--red); }
.portfolio-intro { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: calc(var(--header) + 28px) var(--gutter) 24px; }
.portfolio-intro h1 { font-size: clamp(44px, 4vw, 62px); line-height: .95; }
.portfolio-intro p { color: var(--portfolio-muted); font-size: 15px; }
.portfolio-work { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 var(--gutter) 26px; }
.portfolio-selectors { grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 16px; }
.project-select { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 0 0; text-align: left; color: var(--portfolio-muted); background: none; border: 0; border-top: 2px solid var(--portfolio-line); font: inherit; font-size: 14px; line-height: 1.3; transition: border-color .2s, color .2s; }
.project-select > span:first-child { color: var(--portfolio-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.project-select[aria-pressed="true"] { color: var(--portfolio-ink); border-color: var(--red); }
.project-select[aria-pressed="true"] > span:first-child, .project-select:hover { color: var(--red); }
.project-select:hover { border-color: var(--red); }
/* Keep the slide semantics and swipe events while placing its scope below the shared toolbar. */
.portfolio-stage, .portfolio-project { display: contents; }
.portfolio-project[hidden] { display: none; }
.portfolio-photo { grid-row: 2; position: relative; display: block; justify-self: center; width: min(100%, calc(clamp(420px, 62svh, 650px) * var(--photo-ratio))); height: auto; aspect-ratio: var(--photo-ratio); margin: 0; padding: 0; border: 0; background: transparent; color: #fff; cursor: zoom-in; overflow: hidden; touch-action: pan-y pinch-zoom; }
.portfolio-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.project-photo-action { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 18px; min-height: 44px; padding: 0 15px; background: #111719ed; border: 1px solid #ffffff40; font-size: 12px; transition: background .2s; }
.project-photo-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.portfolio-photo:hover .project-photo-action { background: #b7192c; border-color: #b7192c; }
.portfolio-page button:focus-visible, .portfolio-page a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.portfolio-page .portfolio-photo:focus-visible { outline-offset: -4px; }
.project-photo-title, .portfolio-page .sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.portfolio-controls { grid-row: 3; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 24px 0 22px; }
.project-heading { min-width: 0; }
.project-discipline { color: var(--portfolio-muted); font-size: 13px; line-height: 1.4; margin-bottom: 8px; }
.project-heading h2 { font-size: clamp(32px, 3vw, 44px); line-height: 1; }
.portfolio-arrows { display: flex; align-items: center; gap: 18px; flex: none; }
.portfolio-arrows button { display: grid; place-items: center; width: 48px; height: 48px; background: transparent; color: var(--portfolio-ink); border: 1px solid #869196; font-size: 24px; transition: background .2s, border-color .2s; }
.portfolio-arrows button:hover { background: var(--red); border-color: var(--red); color: #fff; }
.portfolio-count { color: var(--portfolio-muted); font-size: 12px; letter-spacing: .08em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.project-description { grid-row: 4; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 30px; padding-top: 18px; border-top: 1px solid var(--portfolio-line); }
.project-scope-label { color: var(--portfolio-muted); font-size: 12px; line-height: 1.5; }
.project-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; }
.project-scope li { position: relative; padding-left: 12px; font-size: 14px; line-height: 1.45; color: var(--portfolio-muted); }
.project-scope li:before { content: ''; position: absolute; top: .58em; left: 0; width: 3px; height: 3px; background: var(--red); }
.portfolio-close { margin: 0 var(--gutter); padding: 10px 0 20px; border-top: 1px solid var(--portfolio-line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.portfolio-close > p { color: var(--portfolio-muted); font-size: 14px; }
.portfolio-close .inner-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 48px; color: var(--portfolio-ink); font-size: 14px; }
.portfolio-close .inner-action svg, .portfolio-close .inner-action:hover { color: var(--red); }
.portfolio-page .viewer-image { touch-action: pan-y pinch-zoom; }
@media (max-width: 760px) {
 .portfolio-page { --gutter: 20px; }
 .portfolio-intro { display: block; padding-top: calc(var(--header) + 24px); padding-bottom: 22px; }
 .portfolio-intro h1 { font-size: 44px; }
 .portfolio-intro p { margin-top: 10px; font-size: 14px; }
 .portfolio-work { padding-bottom: 22px; }
 .portfolio-selectors { gap: 12px; padding-bottom: 14px; }
 .project-select { align-items: flex-start; flex-direction: column; gap: 7px; padding-top: 10px; min-height: 76px; font-size: 12px; }
 .project-select > span:first-child { font-size: 11px; }
 .portfolio-photo { width: 100%; height: auto; aspect-ratio: var(--photo-ratio); }
 .project-photo-action { right: 10px; bottom: 10px; min-height: 44px; padding: 0 11px; gap: 12px; font-size: 11px; }
 .project-photo-action > span { display: none; }
 .portfolio-controls { align-items: flex-start; gap: 12px; padding: 18px 0; }
 .project-discipline { font-size: 12px; margin-bottom: 8px; }
 .project-heading h2 { font-size: clamp(27px, 7.5vw, 38px); line-height: 1; overflow-wrap: break-word; }
 .portfolio-arrows { display: grid; grid-template-columns: repeat(2, 44px); gap: 8px; padding-top: 0; }
 .portfolio-arrows button { width: 44px; height: 44px; font-size: 22px; }
 .portfolio-count { grid-row: 2; grid-column: 1 / -1; text-align: center; font-size: 11px; }
 .portfolio-next { grid-row: 1; grid-column: 2; }
 .project-description { display: block; padding-top: 14px; }
 .project-scope-label { margin-bottom: 10px; font-size: 12px; }
 .project-scope { display: block; }
 .project-scope li { font-size: 14px; line-height: 1.45; margin-top: 7px; }
 .portfolio-close { padding: 12px 0 15px; gap: 14px; }
 .portfolio-close > p { max-width: 140px; font-size: 13px; line-height: 1.4; }
 .portfolio-close .inner-action { gap: 13px; font-size: 13px; }
 .portfolio-page .project-viewer figure { justify-content: center; gap: 20px; }
 .portfolio-page .viewer-image { width: 100%; height: auto; max-height: 57svh; flex: 0 1 auto; margin: 0; }
 .portfolio-page .project-viewer { padding-bottom: 150px; }
 .portfolio-page .project-viewer h2 { font-size: 30px; }
 .portfolio-page .project-viewer figcaption { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .portfolio-page button, .project-photo-action { transition: none; } }