.portfolio-page, .project-page { background: #050605; color: #f0f0ec; }
.portfolio-stage { min-height: calc(100svh - 84px); margin-top: 84px; }
.portfolio-main { padding: 32px var(--gutter) 90px; }
.portfolio-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 14px; }
.portfolio-heading h1, .project-back-link { margin: 0; font: 300 clamp(30px,3vw,44px)/1.2 Inter,sans-serif; letter-spacing: -.045em; }
.portfolio-status { color: #a1aa99; font-size: 11px; letter-spacing: .06em; }
.portfolio-toolbar { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 0 22px; margin-bottom: 30px; border-bottom: 1px solid #ffffff38; }
.portfolio-filter-toggle, .portfolio-selected button, .portfolio-clear { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 32px; padding: 5px 14px; border: 1px solid #ffffff80; border-radius: 999px; background: transparent; color: #e6e9e1; font: 400 11px/1.4 'Inter',Arial,sans-serif; cursor: pointer; }
.portfolio-filter-toggle svg { width: 16px; height: 16px; }
.portfolio-filter-toggle:hover, .portfolio-selected button:hover, .portfolio-clear:hover { color: var(--orange); border-color: var(--orange); }
.portfolio-filter-toggle[aria-expanded="true"] { background: #ecefe5; color: #0b0d0a; }
.portfolio-selected { display: flex; flex-wrap: wrap; gap: 8px; }
.portfolio-clear { margin-left: auto; border-color: #ffffff38; color: #a1aa99; }
.portfolio-filter-panel { position: absolute; z-index: 5; top: calc(100% - 10px); left: 0; width: min(440px,100%); padding: 24px; border: 1px solid #535c4a; background: #10140e; box-shadow: 0 18px 50px #0009; }
.portfolio-filter-panel[hidden], .portfolio-card[hidden], .portfolio-empty[hidden], .portfolio-clear[hidden] { display: none !important; }
.portfolio-filter-panel fieldset { margin: 0; padding: 0; border: 0; }
.portfolio-filter-panel legend { margin-bottom: 16px; color: #a2ad98; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-filter-option { display: flex; align-items: center; gap: 12px; min-height: 42px; font-size: 13px; cursor: pointer; }
.portfolio-filter-option input { accent-color: var(--orange); width: 15px; height: 15px; }
.portfolio-filter-option span:last-child { margin-left: auto; color: #8d9982; font-size: 11px; }
.portfolio-projects { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 44px 26px; }
.portfolio-card { min-width: 0; }
.portfolio-card-link { display: block; }
.portfolio-cover { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: #151a11; }
.portfolio-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.portfolio-card-link:hover .portfolio-cover img { transform: scale(1.035); }
.portfolio-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 12px; }
.portfolio-caption h2 { margin: 0; font: 400 15px/1.4 'Inter',Arial,sans-serif; letter-spacing: -.015em; }
.portfolio-year { flex: 0 0 auto; font-size: 13px; color: #d4dccc; }
.portfolio-tags { display: flex; flex-wrap: wrap; gap: 7px 6px; margin-top: 9px; }
.portfolio-tag { display: inline-block; max-width: 100%; padding: 2px 9px; border: 1px solid #ffffff50; border-radius: 999px; color: #c6d0bc; font-size: 9px; line-height: 1.5; }
.portfolio-empty { padding: 60px 0; color: #aab4a0; font-size: 16px; }
.projects-footer { padding: 24px var(--gutter) 28px; text-align: center; }
.projects-footer p { margin: 0; color: #9eaa93; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.project-stage { position: relative; min-height: 100svh; }
.project-hero { position: relative; height: calc(100svh - 84px); min-height: 420px; overflow: hidden; background: #080b07; touch-action: pan-y; }
.project-track { position: relative; display: flex; align-items: stretch; gap: 14px; height: 100%; transition: transform .65s cubic-bezier(.25,.7,.2,1); will-change: transform; }
.project-slide { position: relative; flex: 0 0 auto; height: 100%; margin: 0; overflow: hidden; background: #11170d; }
.project-slide img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.4); transition: filter .55s ease; }
.project-slide.is-active img { filter: brightness(1); }
.project-back-link { position: absolute; z-index: 2; top: 116px; left: var(--gutter); color: #fff; mix-blend-mode: difference; transition: color .25s ease; }
.project-back-link:hover { color: var(--orange); }
body.menu-open .project-back-link { visibility: hidden; }
.project-gallery-arrow { position: absolute; z-index: 2; top: 50%; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid #ffffff90; border-radius: 50%; background: #0003; color: #fff; font-size: 26px; font-weight: 300; cursor: pointer; transform: translateY(-50%); }
.project-gallery-arrow:hover { color: var(--orange); border-color: var(--orange); background: #0008; }
.project-gallery-arrow:disabled { opacity: .22; cursor: default; }
.project-gallery-prev { left: 22px; }
.project-gallery-next { right: 22px; }
.project-photo-count { position: absolute; z-index: 2; right: var(--gutter); bottom: 22px; padding: 5px 9px; background: #0006; color: white; font-size: 10px; letter-spacing: .12em; }
.project-meta-strip { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto; align-items: center; gap: 22px; min-height: 84px; padding: 18px var(--gutter); border-bottom: 1px solid #ffffff26; }
.project-meta-strip h1 { margin: 0; font: 400 clamp(16px,1.7vw,24px)/1.3 'Inter',Arial,sans-serif; letter-spacing: -.02em; }
.project-meta-strip p { margin: 0; color: #d3dccb; font-size: 13px; line-height: 1.6; }
.project-meta-strip .project-meta-year { text-align: right; }
.project-information { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 9vw; padding: clamp(64px,7vw,110px) var(--gutter); }
.project-overview h2 { margin: 0 0 22px; font: 300 clamp(26px,3vw,42px)/1.2 Inter,sans-serif; letter-spacing: -.035em; }
.project-description { min-height: 190px; max-width: 660px; color: #bcc8b2; font-size: 15px; line-height: 1.9; }
.project-facts { margin: 0; }
.project-facts > div { display: grid; grid-template-columns: minmax(100px,.8fr) minmax(0,1.2fr); gap: 20px; padding: 17px 0; border-top: 1px solid #ffffff30; }
.project-facts dt { color: #a4b197; font-size: 10px; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }
.project-facts dd { margin: 0; color: #e5eade; font-size: 13px; line-height: 1.6; }
.project-not-found { min-height: 75svh; padding: 180px var(--gutter) 80px; }
.project-not-found h1 { font: 300 40px/1.2 Inter,sans-serif; }
@media (max-width: 1200px) { .portfolio-projects { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 900px) { .portfolio-projects { grid-template-columns: repeat(2,minmax(0,1fr)); }  }
@media (max-width: 700px) {
 .portfolio-stage { margin-top: 68px; }
 .portfolio-main { padding-top: 24px; }
 .portfolio-toolbar { margin-bottom: 24px; gap: 10px; }
 .portfolio-heading h1 { font-size: 30px; }
 .portfolio-projects { gap: 32px 18px; }
 .portfolio-caption { gap: 8px; }
 .portfolio-caption h2 { font-size: 14px; }
 .portfolio-year { font-size: 11px; }
 .portfolio-clear { margin-left: 0; }
 .project-hero { height: calc(100svh - 112px); min-height: 340px; }
 .project-back-link { top: 92px; font-size: 30px; }
 .project-gallery-arrow { width: 34px; height: 34px; font-size: 22px; }
 .project-gallery-prev { left: 12px; } .project-gallery-next { right: 12px; }
 .project-meta-strip { min-height: 112px; grid-template-columns: minmax(0,1fr) auto; gap: 10px 20px; }
 .project-meta-strip h1 { grid-column: 1 / -1; font-size: 18px; }
 .project-meta-strip p { font-size: 11px; }
 .project-information { grid-template-columns: 1fr; gap: 30px; padding-top: 56px; }
 .project-description { min-height: 110px; }
}
@media (max-width: 480px) { .portfolio-projects { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .project-track, .project-slide img, .portfolio-cover img { transition: none; } }

.project-related { padding: 0 var(--gutter) 80px; }
.project-related-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-top: 30px; margin-bottom: 30px; border-top: 1px solid #ffffff30; }
.project-related-heading h2 { margin: 0; font: 300 clamp(28px,3vw,40px)/1.2 Inter,sans-serif; letter-spacing: -.04em; }
.project-related-heading > a, .project-related-return > a { color: #acb6a2; font-size: 11px; }
.project-related-heading > a:hover, .project-related-return > a:hover { color: var(--orange); }
.project-related-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px 26px; }
.portfolio-caption h3 { margin: 0; font: 400 15px/1.4 'Inter',Arial,sans-serif; letter-spacing: -.015em; }
.project-related-return { margin: 0 var(--gutter) 60px; padding-top: 26px; border-top: 1px solid #ffffff30; }
@media (max-width: 1000px) { .project-related-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .project-related-grid { grid-template-columns: 1fr; } .project-related-heading { align-items: flex-start; flex-direction: column; gap: 14px; } }