/* A portfolio archive with equal emphasis on the work and its context. */
.work-page{background:#f5efce;color:#24201c;}
.portfolio-intro{padding-block:85px 65px;}
.portfolio-intro .eyebrow{color:#c82032;margin-bottom:28px;}
.portfolio-intro h1{font-size:clamp(50px,7.5vw,112px);line-height:.95;max-width:1100px;}
.portfolio-intro h1 em{font-size:1.05em;color:#c82032;transform:none;margin:8px 0 0;}
.portfolio-intro-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:35px;}
.portfolio-intro-bottom p{max-width:640px;font-size:19px;line-height:1.65;}
.portfolio-jump{font-size:15px;min-height:44px;display:flex;align-items:center;gap:25px;border-bottom:1px solid #c82032;white-space:nowrap;}
.work-archive{display:block;padding-block:30px 90px;}
.work-archive aside{position:static;display:flex;align-items:center;flex-wrap:wrap;gap:22px;border-top:1px solid #24201c30;padding-top:28px;margin-bottom:35px;}
.work-archive .archive-title{font-size:22px;line-height:1.3;letter-spacing:-.03em;width:100%;}
.work-archive .filters{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin:0;}
.work-archive .filters button{background:transparent;color:#24201c;border:1px solid #24201c45;border-radius:6px;padding:10px 16px;min-height:44px;font-size:14px;text-align:center;}
.work-archive .filters button[aria-pressed='true']{background:#c82032;border-color:#c82032;color:#fff;}
.work-archive .filters button:hover{border-color:#c82032;}
.work-archive .filter-count{margin:0 0 0 auto;color:#51493f;font-size:13px;}
.work-archive .archive-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 25px;}
.work-archive .project{padding:0!important;min-width:0;text-decoration:none;}
.work-archive .project-image,.work-archive .project-image.client-art{aspect-ratio:4/3!important;width:100%;padding:0;background:#e4ded2;border-radius:8px;display:flex;overflow:hidden;}
.work-archive .project-image img,.work-archive .project-image.client-art img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;box-shadow:none;transition:transform .4s ease;}
.work-archive .project:hover .project-image img{transform:scale(1.025);}
.work-archive .project-caption{margin-top:17px;gap:8px;}
.work-archive .project-caption h3{font-size:19px;line-height:1.25;letter-spacing:-.03em;}
.work-archive .project-caption>span{color:#51493f;font-size:13px;}
.work-page .closing{background:#24201c;color:#f5efce;border:0;}
.work-page .closing .pill{background:#c82032;color:#fff;border-color:#c82032;}
.work-page .closing .pill:hover{background:#fff;color:#c82032;border-color:#fff;}
.work-page .project:focus-visible,.portfolio-jump:focus-visible,.work-archive button:focus-visible{outline:3px solid #c82032;outline-offset:5px;}
@media(max-width:1000px){.work-archive .archive-projects{grid-template-columns:repeat(2,minmax(0,1fr));}.work-archive .filter-count{width:100%;margin:0;}}
@media(max-width:600px){.portfolio-intro{padding-block:55px 35px;}.portfolio-intro h1{font-size:clamp(44px,10vw,64px);}.portfolio-intro-bottom{display:block;margin-top:25px;}.portfolio-intro-bottom p{font-size:16px;}.portfolio-jump{width:max-content;margin-top:20px;}.work-archive .archive-projects{grid-template-columns:1fr;gap:32px;}.work-archive aside{gap:18px;}.work-archive .filters button{padding:10px 13px;font-size:13px;}.work-archive .project-caption h3{font-size:21px;}}
@media(prefers-reduced-motion:reduce){.work-archive .project-image img{transition:none;transform:none!important;}}
.reduce-motion .work-archive .project-image img{transition:none;transform:none!important;}

/* Spacious project presentations: artwork first, project context below. */
.work-archive .archive-projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;}
.work-archive article.project{background:#24201c;color:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px #24201c0b;}
.portfolio-preview{display:block;overflow:hidden;}
.work-archive article .project-image,.work-archive article .project-image.client-art{border-radius:0;aspect-ratio:4/3!important;}
.work-archive article[data-presentation='website'] .project-image{aspect-ratio:16/10!important;background:#e4ded2;}
.work-archive article[data-presentation='website'] .project-image img{object-fit:cover;object-position:top;}
.work-archive article[data-presentation='design'] .project-image img{object-fit:contain;}
.work-archive .portfolio-project-info{padding:26px 28px 24px;display:flex;flex-direction:column;flex:1;}
.work-archive .project-caption{margin:0;gap:10px;}
.work-archive .project-caption h3{font-size:clamp(20px,2vw,29px);color:#fff;line-height:1.2;}
.work-archive .project-caption>span{color:#d6cebd;font-size:14px;}
.work-archive .project-caption>span>span{display:none;}
.portfolio-actions{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-top:auto;padding-top:25px;}
.portfolio-actions a{min-height:46px;display:inline-flex;justify-content:space-between;align-items:center;gap:22px;border:1px solid #ffffff55;border-radius:6px;padding:11px 16px;font-size:14px;line-height:1.4;}
.portfolio-actions .portfolio-detail{background:#fff;color:#c82032;border-color:#fff;}
.portfolio-actions .portfolio-detail:hover{background:#c82032;color:#fff;border-color:#fff;text-decoration:none;}
.portfolio-actions .portfolio-live{color:#fff;}.portfolio-actions .portfolio-live:hover{background:#fff;color:#c82032;border-color:#fff;text-decoration:none;}
.portfolio-actions svg{width:18px;height:18px;}
.portfolio-preview:focus-visible{outline:4px solid #c82032;outline-offset:-5px;}.portfolio-actions a:focus-visible{outline:3px solid #fff;outline-offset:4px;}
@media(max-width:800px){.work-archive .archive-projects{gap:28px;}.work-archive .portfolio-project-info{padding:22px;}.portfolio-actions{gap:10px;}.portfolio-actions a{font-size:13px;gap:14px;}}
@media(max-width:600px){.work-archive .archive-projects{grid-template-columns:1fr;}.work-archive .project-caption h3{font-size:23px;}.portfolio-actions{padding-top:22px;}.portfolio-actions a{flex:1;white-space:nowrap;}}
/* Keep website navigation and edge content intact within each preview. */
.work-archive article[data-presentation='website'] .project-image{aspect-ratio:16/9!important;}
.work-archive article[data-presentation='website'] .project-image img{object-fit:contain;object-position:center;}