/* Selected work uses the same quiet paper, ink and lime palette as the library. */
.work-page .wrap{max-width:1440px}
.work-page .nav nav{gap:26px}
.work-page .nav-cta{min-height:44px;align-items:center}
.work-intro{display:grid;grid-template-columns:1.7fr 1fr;gap:70px;align-items:end;padding:37px 0 52px}
.work-back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:32px;font-size:11px;color:#62725b;text-decoration:none}
.work-back:hover{text-decoration:underline;text-underline-offset:4px}
.work-intro .eyebrow{margin-bottom:21px}
.work-intro h1{font-size:clamp(54px,5.5vw,78px);line-height:1.03;letter-spacing:-.06em}
.work-intro h1 em{padding:0 8px 4px;margin-top:7px}
.work-intro>p{font-size:15px;line-height:1.75;color:#64715c;max-width:340px;margin:0 0 4px}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:49px 28px;padding:4px 0 74px}
.project{min-width:0}
.project-preview{display:block;position:relative;overflow:hidden;border:1px solid #d6decf;border-radius:6px;background:#ecefe6;text-decoration:none}
.project-browser{display:flex;justify-content:space-between;align-items:center;gap:12px;height:35px;padding:0 14px;background:#edf1e6;border-bottom:1px solid #d9e0d1;color:#708064;font-size:9px;letter-spacing:.02em}
.browser-dots{font-size:6px;letter-spacing:3px;color:#a6b39a}
.project-browser>span:last-child{font-size:14px}
.project-preview img{display:block;width:100%;height:auto;aspect-ratio:1265/712;object-fit:cover;object-position:top;transition:transform .4s ease}
.project-preview:hover img{transform:scale(1.015)}
.project-view{display:inline-flex;align-items:center;gap:22px;min-height:43px;position:absolute;right:13px;bottom:13px;background:#f7f8f4f2;border:1px solid #d2ddc7;border-radius:4px;padding:11px 14px;color:#31452a;font-size:11px;box-shadow:0 2px 9px #17211a0a;transition:background .2s ease}
.project-view>span{font-size:17px}
.project-preview:hover .project-view{background:#d6f078;border-color:#c5db8e}
.project-info{padding:20px 1px 0}
.project-title{display:flex;align-items:center;justify-content:space-between;gap:15px}
.project-title h2{font-size:24px;font-weight:500;letter-spacing:-.7px;margin:0}
.project-title>span{color:#7c886f;font-size:8px;letter-spacing:.09em;line-height:1.5;text-align:right}
.project-info p{font-size:12px;color:#68765f;line-height:1.75;max-width:460px;margin:11px 0 0}
.work-next{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:43px 46px;background:#e9eddf;border:1px solid #dee5d5;border-radius:6px;margin-bottom:60px}
.work-next .eyebrow{font-size:9px;margin-bottom:16px}
.work-next h2{margin:0;font-size:clamp(35px,3.7vw,49px);font-weight:500;letter-spacing:-.045em;line-height:1.06}
.work-next>div:last-child{max-width:340px;width:100%;justify-self:end}
.work-designs{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:44px;font-size:10px;line-height:1.5;margin-top:10px;text-decoration:none;color:#5d7350}
.work-designs:hover{text-decoration:underline;text-underline-offset:4px}
.work-page footer nav{display:flex;flex-wrap:wrap;gap:22px;align-items:center;font-size:11px}
.work-page footer nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.work-page footer nav a:hover{text-decoration:underline;text-underline-offset:4px}
.work-footer-note{font-size:10px;font-weight:400;letter-spacing:0;color:#738167;margin-left:5px}
@media(max-width:1000px){.work-intro{gap:40px;grid-template-columns:1.5fr 1fr}.work-intro h1{font-size:60px}.work-intro>p{font-size:13px}.project-grid{gap:39px 22px}.project-title h2{font-size:22px}.project-title>span{font-size:7px}.work-next{padding:35px;gap:35px}.work-page footer{flex-wrap:wrap}.work-page footer nav{margin-left:auto}.work-page footer>a:last-child{flex-basis:100%;min-height:44px;display:flex;align-items:center}}
@media(max-width:640px){.work-page .nav nav{gap:0}.work-page .nav nav>a:first-child{display:none}.work-page .nav-cta{font-size:10px;gap:9px;padding:11px 10px}.work-page .brand{gap:7px;font-size:18px}.work-page .mark{width:31px;height:31px}.work-intro{grid-template-columns:1fr;gap:23px;padding:23px 0 33px}.work-back{margin-bottom:21px}.work-intro .eyebrow{font-size:9px;margin-bottom:17px}.work-intro h1{font-size:clamp(48px,11.8vw,67px)}.work-intro>p{font-size:13px;max-width:430px}.project-grid{grid-template-columns:1fr;gap:33px;padding-bottom:45px}.project-browser{height:32px;padding:0 10px;font-size:8px}.project-view{right:10px;bottom:10px;min-height:44px;padding:10px 12px;font-size:10px}.project-title h2{font-size:23px}.project-title>span{font-size:8px}.project-info{padding-top:16px}.project-info p{font-size:12px;margin-top:9px}.work-next{grid-template-columns:1fr;gap:25px;padding:28px 21px;margin-bottom:35px}.work-next h2{font-size:39px}.work-next>div:last-child{justify-self:stretch;max-width:none}.work-designs{font-size:10px}.work-page footer{gap:9px}.work-page footer nav{margin-left:0;flex-basis:100%;gap:23px}.work-page footer>a:last-child{flex-basis:auto}.work-footer-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){.project-preview img,.project-view{transition:none}.project-preview:hover img{transform:none}}

/* A two-column portfolio keeps the actual page images easy to compare. */
@media(max-width:640px){
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  .project-browser{height:25px;padding:0 6px;font-size:7px;gap:5px;letter-spacing:0}
  .project-browser .browser-dots{display:none}
  .project-browser>span:last-child{font-size:12px;flex:none}
  .project-view{position:static;display:flex;justify-content:space-between;gap:6px;min-height:44px;padding:9px 8px;border:0;border-top:1px solid #d2ddc7;border-radius:0;font-size:11px;line-height:1.4;box-shadow:none}
  .project-info{padding-top:12px}
  .project-title{display:block}
  .project-title h2{font-size:19px;line-height:1.25;letter-spacing:-.5px}
  .project-title>span{display:block;text-align:left;font-size:10px;line-height:1.45;letter-spacing:.03em;margin-top:6px}
  .project-info p{font-size:12px;line-height:1.7;margin-top:9px}
  .work-page .nav-cta{font-size:12px;line-height:1.4;min-height:44px}
  .work-page footer nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;font-size:12px}
}