/* KREM: photographic categories and compact project archive. */
:root{--catalog-paper:#f7f7f5;--catalog-surface:#e2e3df;--catalog-ink:#171717;--catalog-muted:#555853;--catalog-line:#c8cbc5}
.story-content a{text-decoration:underline;text-underline-offset:4px}
.client-projects{padding-block:70px 85px}
.project-intro{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,90px);align-items:center;margin-bottom:36px}
.project-intro figure{position:relative;max-width:460px;background:var(--catalog-surface)}
.project-intro figure img{width:100%;aspect-ratio:1;object-fit:contain}
.project-intro figcaption{padding:12px 17px;color:var(--catalog-ink);font-size:13px}
.project-intro h2{font-size:clamp(48px,5.4vw,76px);margin-bottom:26px}
.project-intro .project-slogan{font-size:clamp(21px,2vw,28px);line-height:1.5;color:var(--catalog-ink);margin-bottom:18px;letter-spacing:-.02em}
.project-intro>div>p:last-child{font-size:17px;line-height:1.75;color:var(--catalog-muted);max-width:500px}
.projects-disclosure>summary{display:flex;align-items:center;justify-content:space-between;padding:23px 28px;background:var(--catalog-ink);color:white;font-size:17px;min-height:72px;gap:25px}
.projects-disclosure>summary:hover{background:#323432}
.project-toggle{display:inline-block;position:relative;width:24px;height:24px;flex:0 0 24px;align-self:center}
.project-toggle::before,.project-toggle::after{content:"";position:absolute;left:4px;top:11px;width:16px;height:1.5px;background:currentColor}
.project-toggle::after{transform:rotate(90deg);transition:transform .2s}
details[open]>summary .project-toggle::after{transform:rotate(0)}
.project-list{padding-top:12px}
.project-row{border-bottom:1px solid var(--catalog-line)}
.project-row>summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 24px;align-items:center;gap:25px;padding:26px 10px;min-height:88px}
.project-row>summary:hover{background:#eeefeb}
.project-brand{font-size:21px;line-height:1.4;font-weight:600;letter-spacing:-.03em}
.project-specialty{font-size:16px;color:var(--catalog-muted)}
.project-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(30px,5vw,75px);padding:4px 10px 35px}
.project-body h3{font:400 clamp(28px,2.8vw,40px)/1.15 var(--serif);max-width:400px;letter-spacing:-.025em}
.project-body p{font-size:16px;line-height:1.8;color:var(--catalog-muted)}
.project-body p+p{margin-top:15px}
.project-site a{display:inline-flex;align-items:center;min-height:44px;color:var(--catalog-ink);text-decoration:underline;text-underline-offset:5px;font-weight:500}
.cosmetics{padding-block:80px 85px;background:var(--catalog-surface)}
.cosmetics-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:50px;align-items:end;margin-bottom:44px}
.cosmetics-heading h2{font-size:clamp(48px,5.2vw,76px)}
.cosmetics-heading p{font-size:17px;color:var(--catalog-muted);max-width:420px}
.cosmetics-heading p:first-child{font-size:22px;color:var(--catalog-ink);line-height:1.5;margin-bottom:20px;letter-spacing:-.02em}
.cosmetics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 18px;align-items:start}
.cosmetic-card{min-width:0;background:var(--catalog-paper)}
.cosmetic-card>img{width:100%;aspect-ratio:1;object-fit:contain;filter:none}
.cosmetic-copy{padding:23px 20px 10px}
.cosmetic-copy h3{font-size:19px;line-height:1.35;font-weight:600;letter-spacing:-.03em;min-height:52px;overflow-wrap:break-word}
.cosmetic-examples{font-size:15px;line-height:1.65;color:var(--catalog-muted);margin:12px 0 17px;min-height:75px}
.cosmetic-copy details{border-top:1px solid var(--catalog-line)}
.cosmetic-copy summary{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;line-height:1.5;padding-block:16px;min-height:58px}
.cosmetic-copy summary .project-toggle{width:18px;flex-basis:18px}
.cosmetic-copy summary .project-toggle::before,.cosmetic-copy summary .project-toggle::after{width:12px;left:3px}
.cosmetic-description{padding:0 0 15px}
.cosmetic-description p{font-size:16px;line-height:1.8;color:var(--catalog-muted)}
.cosmetic-description p+p{margin-top:16px}
.cosmetic-description .text-link{font-size:15px;min-height:44px;margin-top:20px}
.cosmetics-note{font-size:13px;line-height:1.7;color:var(--catalog-muted);max-width:720px;margin-top:28px}
.quote-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--catalog-surface)}
.quote-image{height:auto;aspect-ratio:1;overflow:visible}
.quote-image img{width:100%;height:100%;object-fit:contain;object-position:center;filter:none}
.quote-copy{padding:clamp(28px,5vw,72px)}
.quote-copy p{font-size:clamp(36px,4.1vw,62px)}
.hero-visual>img,.lab-main-image{filter:none}
@media(min-width:1440px){.cosmetic-copy h3{font-size:21px}}
@media(max-width:1100px){.cosmetics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.cosmetic-copy{padding:24px 25px 10px}.cosmetic-copy h3{min-height:0;font-size:23px}.cosmetic-examples{min-height:50px;font-size:16px}.cosmetic-copy summary{font-size:16px}.project-intro{gap:40px}.project-intro h2{font-size:60px}}
@media(max-width:760px){.client-projects{padding-block:48px 56px}.project-intro{grid-template-columns:1fr 1fr;gap:24px;align-items:start}.project-intro h2{font-size:42px;margin-bottom:18px}.project-intro .project-slogan{font-size:18px}.project-intro>div>p:last-child{font-size:16px}.project-intro figcaption{font-size:12px;padding:12px}.projects-disclosure>summary{padding:19px 22px;font-size:16px;min-height:66px}.project-row>summary{gap:16px;grid-template-columns:minmax(0,1fr) 24px;padding:22px 4px}.project-brand{font-size:21px}.project-specialty{grid-row:2;grid-column:1;font-size:15px}.project-row>summary .project-toggle{grid-column:2;grid-row:1/3}.project-body{grid-template-columns:1fr;gap:17px;padding:0 4px 27px}.project-body h3{font-size:31px}.cosmetics{padding-block:52px 55px}.cosmetics-heading{grid-template-columns:1fr;gap:25px;margin-bottom:32px}.cosmetics-heading h2{font-size:49px}.cosmetics-heading p:first-child{font-size:20px;margin-bottom:12px}.cosmetics-heading p{font-size:16px}.cosmetics-grid{gap:20px}.cosmetic-copy{padding:21px 18px 8px}.cosmetic-copy h3{font-size:20px;min-height:54px}.cosmetic-examples{min-height:78px}.cosmetic-copy summary{font-size:14px}.quote-copy p{font-size:36px}.quote-copy{padding:28px}}
@media(max-width:540px){.project-intro{display:flex;flex-direction:column-reverse;gap:27px}.project-intro h2{font-size:52px}.project-intro .project-slogan{font-size:23px}.project-intro figure{width:100%;max-width:none}.project-intro figcaption{font-size:13px}.project-intro figure img{aspect-ratio:1}.cosmetics-grid{grid-template-columns:1fr;gap:26px}.cosmetic-copy{padding:25px 23px 10px}.cosmetic-copy h3{min-height:0;font-size:23px}.cosmetic-examples{min-height:0;font-size:16px;margin-bottom:20px}.cosmetic-copy summary{font-size:16px}.cosmetics-heading h2{font-size:46px}.quote-section{grid-template-columns:1fr}.quote-copy{padding:38px var(--gutter)}.quote-copy p{font-size:43px}.quote-copy span{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.project-toggle::after{transition:none}}