.portfolio-page { background: var(--bg); }
.portfolio-header { position: absolute; inset: 0 0 auto; z-index: 2; border-bottom: 1px solid var(--line); background: rgba(13,15,18,.68); backdrop-filter: blur(14px); }
.portfolio-header-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.portfolio-header nav { display: flex; align-items: center; gap: 26px; }
.portfolio-header nav a { color: var(--muted); text-decoration: none; font-size: .78rem; transition: color .25s; }
.portfolio-header nav a:hover { color: var(--paper); }
.portfolio-header-cta { padding: 8px 14px; border: 1px solid var(--line); color: var(--paper) !important; }
.portfolio-header-cta span { color: var(--acid); }
.portfolio-hero { min-height: 670px; padding: 180px 0 90px; position: relative; display: flex; align-items: center; background: radial-gradient(circle at 76% 34%, rgba(42,67,81,.4), transparent 32%), linear-gradient(120deg,var(--bg) 59%,#213946); overflow: hidden; }
.portfolio-hero::after { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; bottom: -330px; border: 1px solid rgba(204,145,113,.3); border-radius: 50%; box-shadow: 0 0 0 42px rgba(204,145,113,.04),0 0 0 84px rgba(204,145,113,.035); }
.portfolio-hero-inner { width: min(var(--max),calc(100% - 64px)); display: flex; align-items: flex-end; justify-content: space-between; gap: 70px; }
.portfolio-hero h1 { margin-top: 28px; font: 400 clamp(3.2rem,7.6vw,7.2rem)/.95 var(--serif); letter-spacing: -.04em; }
.portfolio-hero h1 em, .portfolio-section h2 em, .portfolio-practice h2 em, .portfolio-contact h2 em { color: var(--acid); font-style: normal; }
.portfolio-intro { max-width: 540px; margin-top: 32px; color: #d2c4ba; font-size: 1.08rem; }
.portfolio-live { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 4px rgba(204,145,113,.1); }
.portfolio-hero-aside { min-width: 132px; padding: 17px 0 0 18px; display: grid; gap: 7px; border-left: 1px solid var(--acid); color: var(--muted); font-size: .63rem; letter-spacing: .1em; }
.portfolio-hero-aside strong { color: var(--paper); font: 400 3.1rem var(--serif); line-height: .95; }
.portfolio-hero-mark { position: absolute; right: 32px; bottom: 32px; color: var(--line); font-size: .65rem; writing-mode: vertical-rl; }
.portfolio-section { padding: 135px 0 125px; }
.portfolio-section-heading { display: grid; grid-template-columns: 1.1fr .6fr; gap: 80px; align-items: end; }
.portfolio-section h2, .portfolio-practice h2 { margin-top: 20px; font: 400 clamp(2.4rem,4.5vw,4.5rem)/1 var(--serif); letter-spacing: -.03em; }
.portfolio-section-heading > p { color: var(--muted); font-size: .95rem; max-width: 340px; }
.portfolio-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 65px 0 27px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.portfolio-filter { padding: 9px 11px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: .62rem; transition: .25s; }
.portfolio-filter:hover, .portfolio-filter.is-active { color: var(--bg); background: var(--acid); border-color: var(--acid); }
.featured-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.featured-project { min-height: 330px; padding: 23px 24px 20px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); background: #15191c; transition: border-color .3s, transform .3s var(--ease), background .3s; }
.featured-project-wide { grid-column: span 2; min-height: 375px; background: linear-gradient(120deg,rgba(33,57,70,.62),#15191c 65%); }
.featured-project-accent { background: linear-gradient(135deg,rgba(204,145,113,.15),#15191c 65%); }
.featured-project:hover { border-color: var(--acid); transform: translateY(-5px); }
.project-top, .project-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--muted); font-size: .61rem; letter-spacing: .03em; }
.project-status { color: var(--acid); }
.status-building { color: #d7ad72; }
.project-content { max-width: 690px; margin: 34px 0; }
.project-sector { margin-bottom: 13px; color: var(--acid); font-size: .64rem; letter-spacing: .1em; }
.project-content h3 { max-width: 700px; font: 400 clamp(1.8rem,3.3vw,3.2rem)/1.05 var(--serif); letter-spacing: -.02em; }
.featured-project:not(.featured-project-wide) .project-content h3 { font-size: clamp(1.7rem,2.8vw,2.45rem); }
.project-content > p:last-child { max-width: 625px; margin-top: 17px; color: var(--muted); font-size: .9rem; }
.project-bottom { padding-top: 16px; border-top: 1px solid rgba(204,145,113,.15); font-size: .59rem; }
.project-period { color: var(--acid); text-align: right; }
.portfolio-list-heading { display: flex; align-items: center; justify-content: space-between; margin: 105px 0 19px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.portfolio-list-heading > span { color: var(--muted); font-size: .62rem; }
.portfolio-list { border-top: 1px solid var(--line); }
.portfolio-row { display: grid; grid-template-columns: 55px 1fr 170px; gap: 20px; align-items: center; padding: 22px 13px 22px 0; border-bottom: 1px solid var(--line); transition: .25s; }
.portfolio-row:hover { padding-left: 10px; background: rgba(33,57,70,.22); }
.portfolio-row[hidden] { display: none; }
.row-number { color: var(--acid); font-size: .68rem; }
.portfolio-row h3 { font-size: 1.1rem; font-weight: 500; }
.portfolio-row p { margin-top: 4px; color: var(--muted); font-size: .8rem; }
.row-tags { color: var(--muted); font-size: .6rem; text-align: right; }
.portfolio-empty { padding: 30px 0; color: var(--muted); font: .75rem var(--mono); }
.portfolio-practice { padding: 105px 0; background: #15191c; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.practice-inner { display: grid; grid-template-columns: 1fr .75fr; gap: 100px; align-items: center; }
.practice-inner > div:last-child > p { color: var(--muted); font-size: 1rem; }
.practice-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 35px; color: var(--paper); font-size: .65rem; }
.practice-flow b { color: var(--acid); font-weight: 400; }
.portfolio-contact { padding: 125px 0 140px; background: radial-gradient(circle at 78% 40%,rgba(42,67,81,.4),transparent 35%); }
.portfolio-contact h2 { margin: 20px 0 35px; font: 400 clamp(3rem,7vw,6.5rem)/.94 var(--serif); letter-spacing: -.04em; }
@media (max-width: 760px) { .portfolio-header nav a:not(.portfolio-header-cta) { display: none; } .portfolio-hero { min-height: 580px; padding-top: 145px; } .portfolio-hero-inner { align-items: flex-start; flex-direction: column; gap: 45px; } .portfolio-hero-aside { margin-left: 3px; } .portfolio-section-heading, .practice-inner { grid-template-columns: 1fr; gap: 30px; } .featured-grid { grid-template-columns: 1fr; } .featured-project-wide { grid-column: auto; } .portfolio-row { grid-template-columns: 38px 1fr; gap: 14px; } .row-tags { grid-column: 2; text-align: left; } }
@media (max-width: 480px) { .portfolio-header-inner, .portfolio-hero-inner { width: min(var(--max),calc(100% - 40px)); } .portfolio-hero h1 { font-size: 3.35rem; } .portfolio-section { padding: 90px 0; } .portfolio-filters { gap: 6px; margin-top: 42px; } .portfolio-filter { font-size: .56rem; padding: 8px 8px; } .featured-project, .featured-project-wide { min-height: 360px; padding: 18px; } .project-bottom { align-items: flex-start; flex-direction: column; } .project-period { text-align: left; } .portfolio-list-heading { margin-top: 75px; } }