.project-showcase{--bg:#e9e4d9;--ink:#242622;--accent:#ba6246;background:var(--bg);color:var(--ink);overflow:hidden}.project-showcase .cover{width:100%;height:auto;object-fit:cover}.project-showcase .meta{font:11px/1.4 DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em}.project-showcase h1{margin:0;font:500 clamp(4rem,11vw,12rem)/.82 "Playfair Display",serif;letter-spacing:-.085em}.project-showcase .intro{margin:0;max-width:36ch;font-size:clamp(1.05rem,1.8vw,1.5rem);line-height:1.55}.project-showcase .caption{font:500 clamp(1.25rem,2.8vw,3rem)/1.15 "Playfair Display",serif}.project-showcase .back{display:inline-block;padding:18px 5vw 90px;font:11px DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em}.project-showcase .back:hover{color:var(--accent)}.project-showcase.mode-0{--bg:#eeece5}.mode-0 .top{padding:17vh 7vw 8vw;display:grid;grid-template-columns:1fr 1.4fr;gap:8vw;align-items:end}.mode-0 .cover{width:83%;margin-left:auto}.mode-0 .copy{padding:12vw 20vw}.mode-0 .gallery{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;padding:0 5vw 10vw}.mode-0 .gallery img:nth-child(odd){margin-top:13vw}.project-showcase.mode-1{--bg:#262a25;--ink:#efeee7;--accent:#d69770}.mode-1 .top{min-height:92vh;display:grid;grid-template-columns:1fr 1.6fr;align-items:end;padding:10vh 6vw 6vw}.mode-1 h1{writing-mode:vertical-rl;transform:rotate(180deg)}.mode-1 .cover{height:75vh;object-fit:cover}.mode-1 .copy{padding:11vw 15vw 9vw 36%}.mode-1 .gallery{columns:2;gap:12px;padding:0 7vw 12vw}.mode-1 .gallery img{margin:0 0 12px}.project-showcase.mode-2{--bg:#d7d0c1}.mode-2 .top{padding:12vh 5vw 0}.mode-2 .top .meta{margin-bottom:17vh}.mode-2 .cover{width:68%;margin:0 auto}.mode-2 .copy{display:grid;grid-template-columns:1fr 1fr;gap:12vw;padding:13vw 10vw}.mode-2 .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.mode-2 .gallery img{aspect-ratio:1/1;object-fit:cover}.mode-2 .gallery img:nth-child(3n+2){transform:translateY(12vw)}.mode-2 .gallery{padding-bottom:18vw}.project-showcase.mode-3{--bg:#eee6d7;--accent:#8e302b}.mode-3 .top{padding:20vh 13vw 6vw}.mode-3 h1{max-width:8ch}.mode-3 .cover{margin-top:8vw}.mode-3 .copy{border-top:1px solid currentColor;margin:0 7vw;padding:5vw 0 13vw 50%}.mode-3 .gallery{display:grid;grid-template-columns:1.8fr .8fr;gap:6vw;padding:0 10vw 10vw;align-items:start}.mode-3 .gallery img:nth-child(2n){margin-top:16vw}.project-showcase.mode-4{--bg:#e5e2d9}.mode-4 .top{min-height:86vh;display:flex;flex-direction:column;justify-content:space-between;padding:11vh 5vw 5vw}.mode-4 .cover{width:55%;align-self:flex-end}.mode-4 .copy{padding:13vw 9vw;text-align:center}.mode-4 .intro{margin:auto}.mode-4 .gallery{display:flex;flex-direction:column;align-items:center;gap:6vw;padding:0 5vw 10vw}.mode-4 .gallery img{width:min(70vw,900px)}.project-showcase.mode-5{--bg:#d0d2ca;--accent:#8c614a}.mode-5 .top{display:grid;grid-template-columns:1.1fr 1fr}.mode-5 .top>div{padding:17vh 5vw}.mode-5 .cover{height:100%;min-height:78vh;object-fit:cover}.mode-5 .copy{padding:14vw 22vw 12vw 9vw}.mode-5 .gallery{display:grid;grid-template-columns:1fr 1fr;padding:0 4vw 12vw;gap:4vw 10vw}.mode-5 .gallery img:nth-child(4n+1){grid-column:span 2}.project-showcase.mode-6{--bg:#e6dccd;--accent:#795c3c}.mode-6 .top{padding:10vh 5vw 0}.mode-6 h1{text-align:right}.mode-6 .cover{width:76%;margin:8vw 0 0}.mode-6 .copy{padding:14vw 12vw 10vw 48%}.mode-6 .gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;padding:0 4vw 14vw}.mode-6 .gallery img:nth-child(3n+1){grid-column:span 7}.mode-6 .gallery img:nth-child(3n+2){grid-column:8/span 5;margin-top:8vw}.mode-6 .gallery img:nth-child(3n){grid-column:3/span 7}@media(max-width:700px){.project-showcase h1{font-size:4.4rem}.project-showcase .top,.project-showcase.mode-0 .top,.project-showcase.mode-1 .top,.project-showcase.mode-5 .top{display:block;padding:110px 20px 55px;min-height:0}.project-showcase .top .meta{margin-bottom:70px}.project-showcase .cover,.mode-0 .cover,.mode-4 .cover,.mode-6 .cover{width:100%;height:auto;margin-top:45px}.mode-1 h1{writing-mode:initial;transform:none}.mode-1 .cover{height:auto}.project-showcase .copy,.mode-1 .copy,.mode-2 .copy,.mode-3 .copy,.mode-5 .copy,.mode-6 .copy{display:block;padding:80px 24px;margin:0}.project-showcase .gallery,.mode-0 .gallery,.mode-2 .gallery,.mode-3 .gallery,.mode-5 .gallery,.mode-6 .gallery{display:block;padding:0 12px 80px}.project-showcase .gallery img{width:100%;margin:0 0 12px!important;transform:none!important}.mode-4 .gallery{padding:0 12px 80px}}