/* ZOI Designs — inner pages (category, project, sustainability) */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-display);background:var(--ivory);color:var(--ink);font-size:14px;line-height:1.75;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
main.wrap{padding-top:68px;padding-bottom:68px}

/* title */
.p-head{padding:clamp(48px,7vw,100px) 0 clamp(24px,3vw,40px)}
.p-cat{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);font-weight:500}
.p-cat a:hover{color:var(--rust)}
.p-title{font-weight:300;letter-spacing:-.02em;line-height:1.2;font-size:clamp(26px,3.4vw,46px);max-width:22ch;margin:14px 0 18px}
.p-blurb{color:var(--ink-soft);max-width:52ch;font-size:14px}
.p-head>*{animation:rise 1s var(--ease-out) both}
.p-head>:nth-child(1){animation-delay:.05s}.p-head>:nth-child(2){animation-delay:.15s}.p-head>:nth-child(3){animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* project cards (category page) */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:clamp(20px,3vw,40px)}
.work-card{display:block}
.work-card .media{aspect-ratio:4/4.4;overflow:hidden;background:var(--ivory-2)}
.work-card .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-out)}
.work-card:hover .media img{transform:scale(1.06)}
.work-meta{display:flex;align-items:center;justify-content:space-between;padding:16px 2px 0}
.work-meta h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:letter-spacing .5s var(--ease-out)}
.work-sub{display:block;margin-top:2px;font-size:11px;letter-spacing:.1em;color:var(--taupe)}
.work-card:hover .work-meta h3{letter-spacing:.2em}
.work-meta svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.4;fill:none;flex-shrink:0;transition:transform .5s var(--ease-out)}
.work-card:hover .work-meta svg{transform:translateX(6px)}
.js .work-card{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1.1s var(--ease-out)}
.js .work-card.in{opacity:1;transform:none}

/* gallery (project page) */
.chapter{padding-top:clamp(30px,4vw,56px)}
.gallery{column-count:3;column-gap:16px}
.gallery figure{break-inside:avoid;margin:0 0 16px;background:var(--ivory-2);min-height:120px;overflow:hidden}
.gallery img{width:100%;height:auto;transition:transform 1.4s var(--ease-out)}
.gallery figure:hover img{transform:scale(1.04)}
.js .gallery figure{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1.1s var(--ease-out)}
.js .gallery figure.in{opacity:1;transform:none}

/* text page (sustainability) */
.t-body{max-width:68ch;padding-bottom:clamp(40px,6vw,90px)}
.t-body p{color:var(--ink-soft);font-size:15px}
.t-body p+p{margin-top:1.3em}

/* previous / next */
.next-wrap{margin-top:clamp(56px,7vw,100px);border-top:1px solid var(--greige)}
.next{display:flex;justify-content:space-between;gap:24px;padding:28px 0}
.next a{display:block;max-width:48%}
.next .lbl{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:4px}
.next .nm{display:block;font-weight:400;font-size:clamp(14px,1.2vw,16px);line-height:1.5;color:var(--ink-soft);transition:color .4s}
.next a:hover .nm{color:var(--rust)}
.next .r{text-align:right;margin-left:auto}

@media (max-width:980px){.gallery{column-count:2}.work-grid{grid-template-columns:1fr 1fr;gap:16px}}
@media (max-width:560px){.gallery{column-count:1}.work-grid{grid-template-columns:1fr}.next{flex-direction:column}.next a{max-width:100%}.next .r{text-align:left;margin-left:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .gallery figure,.js .work-card{opacity:1;transform:none}}