/* An editorial sequence: the work sets the rhythm, with generous breathing room. */
.work{background:#f4f4ef;padding-top:100px;padding-bottom:90px;overflow:clip}
.work>.section-kicker{display:flex;align-items:center;gap:15px;letter-spacing:.08em}
.work>.section-kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ink)}
.work-heading{display:grid;grid-template-columns:1.7fr .7fr;gap:7%;align-items:end;margin-top:40px}
.work-heading h2{font-size:clamp(58px,6.7vw,110px);line-height:.94;letter-spacing:-.065em;position:relative}
.work-heading h2 em{font-size:1.15em;letter-spacing:-.055em}
.work-heading .heading-star{display:block;position:absolute;left:auto;right:14%;top:auto;bottom:8px;font-size:55px;margin:0;transform:rotate(-13deg)}
.work-intro{padding-bottom:8px}
.work-edition{display:block;font-size:8px;letter-spacing:.07em;margin-bottom:22px}
.work-heading .work-intro p{font-size:15px;line-height:1.6;margin:0;color:#54594b}
.work-discover{display:flex;justify-content:space-between;align-items:center;gap:18px;max-width:280px;margin-top:28px;padding-top:15px;border-top:1px solid #10110e35;font-size:9px;line-height:1.6}
.work-discover>span{font-size:28px;color:var(--ink)}
.work-controls{margin:57px 0 46px;padding:20px 0;border-top:1px solid #10110e30;border-bottom:1px solid #10110e30;gap:22px}
.work .filters{gap:8px}
.work .filters button{border:1px solid #10110e30;border-radius:30px;padding:11px 17px;min-height:40px;font-size:10px;transition:background .25s,border-color .25s,color .25s}
.work .filters button.active{background:var(--ink);border-color:var(--ink);color:#fff}
.work .filters button.active sup{color:var(--yellow)}
.work .filters button:hover{border-color:var(--ink)}
.work .filters button sup{margin-left:7px;font-size:7px}
.work-counter{display:block;font-size:8px;letter-spacing:.09em;white-space:nowrap;color:#55594e}
.project-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(28px,4.2vw,72px);row-gap:64px;align-items:start}
.project{grid-column:span 6;align-self:start;background:transparent;color:var(--ink);margin:0;position:relative}
.project[data-slot="0"],.project[data-slot="3"]{grid-column:span 7}
.project[data-slot="1"],.project[data-slot="2"]{grid-column:span 5}
.project[data-slot="1"]{margin-top:115px}
.project[data-slot="3"]{margin-top:85px}
.project[data-slot="5"]{margin-top:90px}
.project[hidden]{display:none!important}
.project .project-image{height:auto;aspect-ratio:1.28;border:0;border-radius:0;isolation:isolate;transition:transform .55s var(--ease),box-shadow .55s;box-shadow:none}
.project[data-slot="1"] .project-image,.project[data-slot="2"] .project-image{aspect-ratio:.94}
.project .project-image.client-artwork{background:#e7e8df;border:0}
.project .project-image.client-artwork>img{padding:clamp(18px,2vw,34px);filter:none;transition:transform .8s var(--ease)}
.project .project-image.portfolio-photo>img{filter:none;transition:transform 1s var(--ease)}
.project .project-image.web-artwork-long>img{object-fit:contain;object-position:center}
.project .project-image.artwork-salima{background:#1d2537}
.project .project-image.artwork-documentary{background:#0d0f0b}
.project .project-image.artwork-documentary>img{padding:0}
.project .project-label{top:16px;left:16px;z-index:3;background:#10110ee8!important;color:#fff!important;border-radius:20px;font-size:6px;font-weight:400;letter-spacing:.09em;padding:8px 11px;pointer-events:none}
.project .artwork-count{position:absolute;z-index:3;bottom:16px;right:16px;border-radius:20px;padding:9px 12px;font-size:7px;letter-spacing:.07em;background:#10110ee8;color:#fff;transition:background .3s,color .3s}
.project-info{display:grid;grid-template-columns:38px 1fr 36px;gap:10px;align-items:start;padding:20px 0 15px;border-bottom:1px solid #10110e35}
.project-info>.project-index{font-family:'Instrument Serif',serif;font-size:25px;font-style:italic;line-height:1.2;color:#74796a;letter-spacing:-.04em}
.project-name{min-width:0}
.project-name h3{font-size:clamp(21px,2.25vw,36px);font-weight:450;letter-spacing:-.045em;line-height:1.12;margin:0;width:fit-content}
.project-name>span{display:block;font-size:9px;line-height:1.5;color:#606655;margin-top:9px;letter-spacing:.015em}
.project-info .project-link{display:grid;place-items:center;width:33px;height:33px;border:1px solid #10110e45;border-radius:50%;font-size:20px;line-height:1;color:var(--ink);transition:background .3s,border-color .3s,transform .4s}
.project:focus-visible{outline:2px solid var(--ink);outline-offset:8px}
.project:hover .project-link,.project:focus-visible .project-link{background:var(--yellow);border-color:var(--yellow);transform:rotate(45deg)}
.project:hover .artwork-count,.project:focus-visible .artwork-count{background:var(--yellow);color:var(--ink)}
.project:hover .project-image{box-shadow:0 20px 38px #10110e0b}
.project:hover .project-image.portfolio-photo>img{transform:scale(1.045)}
.project:hover .project-image.client-artwork>img{transform:scale(1.025)}
.work .imagery-note{border-top:0;margin-top:55px;padding-top:0;color:#606655;max-width:540px;font-size:10px;line-height:1.7}

/* The original GetCoffee product artwork gets its own sculptural cover. */
.project .project-image.coffee-art{background:#ec6522;aspect-ratio:.9;overflow:hidden}
.coffee-halo{position:absolute;left:-23%;top:9%;width:142%;aspect-ratio:1;border:1px solid #fff5df70;border-radius:50%;background:radial-gradient(circle at 60% 35%,#ffd6ae38,transparent 65%)}
.coffee-halo::before,.coffee-halo::after{content:'';position:absolute;inset:8%;border:1px solid #fff5df40;border-radius:50%}
.coffee-halo::after{inset:18%;border-color:#fff5df33}
.project .coffee-product{position:absolute;top:8%;left:30%;height:77%;width:auto;max-width:none;object-fit:contain;transform:rotate(-14deg);filter:drop-shadow(15px 25px 12px #78341055);transition:transform 1s var(--ease)}
.coffee-cover-note{position:absolute;z-index:2;left:24px;bottom:56px;color:#fff2df;font-size:clamp(29px,3.2vw,50px);line-height:.94;font-weight:550;letter-spacing:-.055em;text-align:left;pointer-events:none}
.project:hover .coffee-product{transform:translateY(-10px) rotate(-8deg)}
.coffee-art .project-label{background:#10110e!important}
.coffee-art .artwork-count{background:#10110e!important}

@media(max-width:1100px){
 .work-heading{grid-template-columns:1.5fr .8fr;gap:5%}
 .work-heading h2{font-size:7vw}
 .work-heading .heading-star{font-size:38px;margin-left:13px}
 .project-grid{column-gap:30px;row-gap:46px}
 .project[data-slot="1"]{margin-top:80px}
 .project[data-slot="3"],.project[data-slot="5"]{margin-top:65px}
 .project-info{grid-template-columns:30px 1fr 30px;gap:7px}
 .project-info>.project-index{font-size:22px}
 .project-info .project-link{width:28px;height:28px;font-size:18px}
 .project-name h3{font-size:25px}
 .coffee-cover-note{left:20px;bottom:52px}
}
@media(max-width:760px){
 .work{padding-top:58px;padding-bottom:50px}
 .work-heading{display:block;margin-top:26px}
 .work-heading h2{font-size:clamp(47px,10.5vw,78px);line-height:.98;letter-spacing:-.055em}
 .work-heading .heading-star{font-size:31px;position:absolute;right:0;bottom:8px;margin:0}
 .work-intro{margin-top:25px;padding-bottom:0}
 .work-edition{font-size:7px;margin-bottom:11px}
 .work-heading .work-intro p{font-size:13px;line-height:1.6}
 .work-discover{display:none}
 .work-controls{margin:27px 0 28px;padding:16px 0;gap:15px;align-items:center}
 .work .filters{gap:7px}
 .work .filters button{font-size:9px;padding:10px 13px;min-height:38px}
 .work .filters button sup{font-size:6px;margin-left:4px}
 .work-counter{font-size:7px}
 .project-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:35px}
 .project,.project[data-slot]{grid-column:1;margin-top:0}
 .project .project-image,.project[data-slot] .project-image{aspect-ratio:1.15}
 .project .project-image.coffee-art{aspect-ratio:1.02}
 .project .project-image.client-artwork>img{padding:22px}
 .project .project-label{left:12px;top:12px;font-size:5px;padding:7px 9px}
 .project .artwork-count{bottom:12px;right:12px;font-size:6px;padding:8px 10px}
 .project-info{grid-template-columns:29px 1fr 31px;gap:8px;padding:16px 0 14px}
 .project-name h3{font-size:26px}
 .project-name>span{font-size:9px;margin-top:6px}
 .project-info>.project-index{font-size:22px}
 .project-info .project-link{width:29px;height:29px}
 .coffee-cover-note{font-size:33px;left:20px;bottom:47px}
 .project .coffee-product{height:78%;top:5%;left:34%}
 .work .imagery-note{margin-top:32px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.project:hover .coffee-product{transform:rotate(-14deg)}.project:hover .project-image>img{transform:none}.project .coffee-product{transform:rotate(-14deg)}}
html[data-motion=off] .project:hover .coffee-product{transform:rotate(-14deg)}