:root { --warm: #f2f0e9; }
.projects-page { background: var(--black); }
.projects-hero { min-height: 720px; padding-top: 170px; display: flex; flex-direction: column; justify-content: flex-end; }
.projects-hero h1 { max-width: 1160px; margin: 24px 0 36px; font-size: clamp(54px, 7.8vw, 126px); line-height: .88; letter-spacing: -.065em; }
.projects-hero h1 span { display: block; color: var(--orange); }
.projects-intro { display: grid; grid-template-columns: minmax(280px, 650px) 1fr; gap: 40px; align-items: end; margin-bottom: 54px; }
.projects-intro > p:first-child { margin: 0; font-size: clamp(18px, 2vw, 26px); color: #d9ddd8; }
.mono-note { justify-self: end; margin: 0; color: var(--lime); font: 12px "IBM Plex Mono", monospace; }
.filter-list { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 24px; border-top: 1px solid var(--line); }
.filter-list button { border: 1px solid #3c403d; background: transparent; color: var(--white); padding: 11px 15px; font: 11px "IBM Plex Mono", monospace; text-transform: uppercase; cursor: pointer; }
.filter-list button:hover, .filter-list button.active { background: var(--lime); border-color: var(--lime); color: var(--black); }
.portfolio-grid { padding-top: 32px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; background: var(--warm); color: var(--black); }
.portfolio-card { position:relative; overflow:hidden; grid-column: span 4; min-height: 610px; background: #e8e6df; transition: opacity .2s ease, transform .2s ease; }
.portfolio-card::after { content:"VIEW PROJECT"; position:absolute; z-index:4; right:18px; top:18px; padding:8px 10px; background:var(--orange); color:var(--black); font:600 9px "IBM Plex Mono",monospace; transform:translateY(-16px); opacity:0; transition:.35s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.portfolio-card:hover::after { transform:none; opacity:1; }
.portfolio-card:hover .portfolio-visual img, .portfolio-card:hover .portfolio-visual video { transform:scale(1.04) translate(var(--px,0),var(--py,0)); filter:saturate(1.08) contrast(1.04); }
.portfolio-card.hidden { display: none; }
.portfolio-card > a { display: grid; height: 100%; color: inherit; text-decoration: none; }
.portfolio-feature { grid-column: span 12; min-height: 650px; background: var(--black); color: var(--white); }
.portfolio-feature > a { grid-template-columns: 1.08fr .92fr; }
.portfolio-wide { grid-column: span 8; }
.portfolio-visual { height: 350px; overflow: hidden; background: #111; }
.portfolio-feature .portfolio-visual { height: 650px; }
.portfolio-visual img, .portfolio-visual video { display: block; width: 100%; height: 100%; object-fit: cover; transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s ease; }
.portfolio-visual.contain img { object-fit: contain; background: var(--warm); }
.portfolio-visual.portrait img { object-position: center 30%; }
.portfolio-copy { padding: clamp(25px, 3.5vw, 54px); }
.portfolio-copy h2 { max-width: 760px; margin: 14px 0 20px; font-size: clamp(30px, 4vw, 62px); line-height: .98; letter-spacing: -.045em; }
.portfolio-card:not(.portfolio-feature) .portfolio-copy h2 { font-size: clamp(27px, 2.8vw, 43px); }
.portfolio-copy > p:not(.kicker) { max-width: 650px; color: #555b56; font-size: 17px; line-height: 1.55; }
.portfolio-feature .portfolio-copy { display: flex; flex-direction: column; justify-content: center; }
.portfolio-feature .portfolio-copy > p:not(.kicker) { color: #c5c9c5; }
.portfolio-arrow { margin-top: 44px; color: var(--orange); font-weight: 800; }
.status-label { display: inline-block; margin-top: 22px; border: 1px solid #acaea9; padding: 8px 10px; font: 10px "IBM Plex Mono", monospace; text-transform: uppercase; }
.site-nav .active { color: var(--white); }
@media (max-width: 980px) {
  .projects-hero { min-height: auto; }
  .portfolio-card, .portfolio-wide { grid-column: span 6; }
  .portfolio-feature { grid-column: span 12; }
}
@media (max-width: 700px) {
  .projects-hero { padding-top: 125px; }
  .projects-intro { grid-template-columns: 1fr; }
  .mono-note { justify-self: start; }
  .portfolio-grid { display: block; }
  .portfolio-card { margin-bottom: 16px; min-height: 0; }
  .portfolio-feature > a { grid-template-columns: 1fr; }
  .portfolio-feature .portfolio-visual { height: 390px; }
  .portfolio-visual { height: 300px; }
}