.projects { background: var(--ink); color: var(--paper); overflow: hidden; }
.projects-track { display: flex; width: max-content; min-height: 100svh; }
.panel { width: 100vw; flex: 0 0 100vw; }
.projects-intro { padding: 130px max(32px, calc((100vw - var(--shell))/2)); display: grid; align-content: center; grid-template-columns: 1fr 3fr 1.3fr; gap: 40px; }
.projects-intro h2 { grid-column: 2; color: var(--paper); }
.projects-intro h2 em { color: #d9724f; }
.projects-intro > p:not(.section-label) { grid-column: 3; align-self: end; font-size: 13px; line-height: 1.75; color: rgba(241,238,229,.62); }
.projects-direction { grid-column: 3; font-size: 8px; letter-spacing: .2em; align-self: end; margin-top: 120px; }
.project-card { position: relative; display: grid; grid-template-rows: 1fr auto; padding: 5vh 3vw 4vh; border-left: 1px solid rgba(241,238,229,.16); }
.project-art { min-height: 66vh; position: relative; overflow: hidden; background: #aaa; }
.project-art > div { position: absolute; }
.art-sky { inset: 0 0 38%; background: linear-gradient(#a9b2b0, #e5dfd1); }.art-ground { inset: 58% 0 0; background: #756f63; }
.art-building { background: #d9d0c0; box-shadow: 30px 30px 60px rgba(0,0,0,.2); }.building-a { width: 58%; height: 50%; left: 17%; bottom: 18%; clip-path: polygon(0 20%, 70% 0, 100% 16%, 100% 100%, 0 100%); }.building-b { width: 25%; height: 38%; right: 9%; bottom: 18%; background: #aaa08f; clip-path: polygon(0 18%, 62% 0, 100% 14%, 100% 100%, 0 100%); }
.art-opening { width: 22%; height: 31%; left: 35%; bottom: 18%; background: #262824; box-shadow: inset 18px 12px 24px rgba(0,0,0,.3); }.art-light { width: 15%; height: 19%; left: 38%; bottom: 20%; background: #c98258; filter: blur(12px); opacity: .5; }.art-tree { width: 8%; height: 56%; bottom: 18%; background: #465342; border-radius: 50% 50% 20% 20%; }.tree-a { right: 13%; }.tree-b { left: 5%; height: 42%; opacity: .72; }.art-figure { width: 4px; height: 55px; background: #191a18; left: 61%; bottom: 18%; }.art-figure::before { content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:#191a18; left:-3px; top:-9px; }.art-caption { left: 18px; bottom: 16px; font-size: 7px; letter-spacing: .17em; color: rgba(255,255,255,.75); }
.project-courtyard .art-sky { background: linear-gradient(#d5bfa9,#eee4d8); }.project-courtyard .art-ground { background:#9f795d; }.project-courtyard .building-a { left: 8%; width: 84%; height: 57%; background:#c9a381; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }.project-courtyard .building-b { display:none; }.project-courtyard .art-opening { width:18%;height:38%;left:41%;background:#352d28; }.project-courtyard .art-tree { background:#6b7359; border-radius:50%; right:8%; width:19%; height:38%; }
.project-salt .art-sky { background: linear-gradient(#bdc8cc,#e8e4d8); }.project-salt .art-ground { background:#d8c7a9; }.project-salt .building-a { width:70%;height:45%;left:14%;bottom:20%;background:#ece7dd;clip-path:polygon(10% 0,100% 14%,91% 100%,0 85%); }.project-salt .building-b { display:none; }.project-salt .art-opening { width:9%;height:29%;left:55%;bottom:25%; }.project-salt .art-tree { display:none; }.project-salt .art-light { left:55%; width:8%; height:20%; background:#ffd8a1; }
.project-pine .art-sky { background:linear-gradient(#737d72,#bec2b4); }.project-pine .art-ground { background:#4d5548; }.project-pine .building-a { background:#8f7156; width:62%;height:38%;left:20%; }.project-pine .building-b { background:#5f4a3a; }.project-pine .art-opening { background:#e6c28d; }.project-pine .art-tree { width:4%;height:82%;background:#263126;border-radius:0; }.project-pine .tree-a{right:8%}.project-pine .tree-b{left:8%;height:74%}
.project-info { padding-top: 26px; display: grid; grid-template-columns: 70px 1fr 1.1fr; gap: 28px; align-items: start; }
.project-info > span { font-family: var(--serif); font-size: 17px; color: #d9724f; }.project-info h3 { font-family: var(--serif); font-size: 34px; margin: 0 0 7px; font-weight: 400; }.project-info p { margin: 0; color: rgba(241,238,229,.58); font-size: 11px; max-width: 360px; line-height: 1.55; }.project-info dl { margin: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.project-info dl div { border-top:1px solid rgba(241,238,229,.2); padding-top:8px; }.project-info dt { font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:rgba(241,238,229,.45);margin-bottom:6px}.project-info dd{margin:0;font-size:9px;line-height:1.4}