.links { gap: 23px; }
.links .group-back { color: #a5b5aa; font-size: 11px; white-space: nowrap; }
footer .group-footer { display: inline-flex; gap: 10px; align-items: center; color: #157c2d; font-weight: 600; margin: 12px 0 3px; text-underline-offset: 4px; }
.projects { padding: 80px 7% 85px; background: #f8f9f6; }
.projects-heading { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-bottom: 32px; }
.projects .eyebrow { color: #238b34; }
.projects h2 { font-size: 40px; line-height: 1.1; letter-spacing: -1.4px; margin: 12px 0 0; }
.projects-intro { font-size: 14px; line-height: 1.75; max-width: 330px; color: #59675d; margin: 0; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.project { background: white; border: 1px solid #dfe5dd; border-radius: 4px; overflow: hidden; }
.project-cover { display: block; position: relative; border: 0; padding: 0; width: 100%; background: #102119; text-align: left; overflow: hidden; }
.project-cover img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s; }
.project-cover:hover img { transform: scale(1.025); }
.photo-count { position: absolute; right: 16px; bottom: 16px; display: inline-flex; gap: 7px; align-items: center; background: #0a130de6; color: white; border-radius: 3px; padding: 9px 12px; font-size: 11px; }
.photo-count svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.project-summary { padding: 25px 27px 26px; }
.project-demo { color: #737e75; font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; }
.project h3 { font-size: 25px; line-height: 1.2; margin: 11px 0 12px; letter-spacing: -.6px; }
.project-summary p { font-size: 14px; color: #5b675e; line-height: 1.7; margin: 0 0 20px; max-width: 440px; }
.project-open { border: 0; background: none; padding: 0; color: #176d2b; font-size: 12px; font-weight: 600; display: inline-flex; gap: 20px; align-items: center; }
.album { padding: 0; border: 0; border-radius: 5px; width: min(1000px, calc(100vw - 56px)); max-width: none; max-height: calc(100dvh - 48px); overflow: auto; color: #18221b; background: #fff; box-shadow: 0 20px 80px #0005; overscroll-behavior: contain; }
.album::backdrop { background: #030b08d9; backdrop-filter: blur(5px); }
.album-top { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 3; background: #0a120f; color: #dce5dd; padding: 12px 20px; }
.album-top .album-brand { font-size: 11px; letter-spacing: .5px; }
.album-close { border: 1px solid #516257; background: transparent; color: #fff; border-radius: 3px; min-height: 36px; padding: 8px 12px; font-size: 11px; }
.album figure { margin: 0; }
.album-stage { position: relative; background: #0b110e; touch-action: pan-y; }
.album-photo { display: block; width: 100%; height: min(54dvh, 560px); object-fit: contain; }
.album-arrow { position: absolute; top: 50%; transform: translateY(-50%); border: 1px solid #ffffff70; border-radius: 50%; background: #07100dcc; color: white; height: 42px; width: 42px; font-size: 22px; display: grid; place-items: center; }
.album-arrow:disabled { opacity: .25; cursor: default; }
.album-prev { left: 16px; }
.album-next { right: 16px; }
.album-stage .album-counter { position: absolute; top: 16px; right: 16px; background: #07100dd9; color: #fff; padding: 8px 11px; border-radius: 20px; font-size: 11px; }
.album-caption { padding: 12px 26px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e8ede5; gap: 20px; }
.album-caption-text { font-size: 11px; color: #68776c; }
.album-dots { display: flex; gap: 3px; flex-shrink: 0; }
.album-dot { display: grid; place-items: center; width: 26px; height: 28px; border: none; background: transparent; padding: 0; }
.album-dot::after { content: ''; width: 6px; height: 6px; border-radius: 100%; background: #c8d0c6; }
.album-dot[aria-current="true"]::after { background: #1ca737; }
.album-description { padding: 27px 6% 38px; max-width: 830px; }
.album-description h2 { margin: 10px 0 19px; font-size: 31px; letter-spacing: -.9px; line-height: 1.15; }
.album-description p { font-size: 15px; line-height: 1.85; color: #4b5c50; margin: 0 0 15px; }
.album-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e0e6dc; margin-top: 25px; padding-top: 18px; gap: 20px; font-size: 11px; }
.album-bottom a { color: #16772c; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1050px) and (min-width: 651px) { .nav { padding-left: 4%; padding-right: 4%; } .links { gap: 15px; } .links .button { padding: 14px; } .logo { width: 145px; } .links .group-back { font-size: 10px; } }
@media (max-width: 650px) { .projects { padding: 45px 6% 50px; } .projects-heading { display: block; margin-bottom: 25px; } .projects h2 { font-size: 31px; } .projects-intro { margin-top: 17px; font-size: 13px; } .project-grid { grid-template-columns: 1fr; gap: 24px; } .project-summary { padding: 21px; } .project h3 { font-size: 24px; } .album { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 4px; } .album-top { padding: 10px 14px; } .album-photo { height: min(42dvh, 380px); } .album-description { padding: 23px 21px 27px; } .album-description h2 { font-size: 27px; } .album-description p { font-size: 14px; line-height: 1.8; } .album-caption { padding: 9px 15px; } .album-arrow { width: 38px; height: 38px; } .album-prev { left: 9px; } .album-next { right: 9px; } .album-bottom { align-items: flex-start; flex-direction: column; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .project-cover img { transition: none; } }