/* A compact editorial spread: the people and story lead; tools support them. */
.connection{--chapter-ink:var(--forest);color:var(--forest);padding-block:28px;margin-bottom:0;border-bottom:0}
.connection-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(30px,4vw,64px);align-items:center;margin-top:18px}
.connection-copy h2{font-size:clamp(36px,3.5vw,54px);line-height:1.08;letter-spacing:-.045em;color:var(--forest)}
.connection-copy h2 span{color:inherit}
/* Match the editorial heading above; type reduction plus 10px less gap
   makes the selected-work header about 20px shorter on desktop. */
.home-page #work-title{font-size:42px;line-height:1.08;letter-spacing:-.045em}
.home-page #work .section-head{margin-bottom:25px}
/* Keep the Work marker clear of the preceding forest section. */
.home-page #work{padding-top:54px}
@media(max-width:850px){.home-page #work{padding-top:40px}}
@media(max-width:560px){.home-page #work{padding-top:32px}}
.connection-copy p{max-width:53ch;font-size:15px;line-height:1.65}
.connection-copy .connection-lead{margin-top:22px;color:var(--forest)}
.connection-copy .connection-body{margin-top:12px;color:var(--forest);font-size:14px}
.connection-figure{min-width:0;align-self:center}
.connection-figure>img{width:100%;height:auto;aspect-ratio:12/5;object-fit:contain;mix-blend-mode:multiply}
.connection-figure figcaption{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-top:12px;border-top:var(--section-rule-width) solid var(--section-rule)}
.connection-figure figcaption strong{display:block;font:600 12px/1.5 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--forest)}
.connection-figure figcaption span{display:block;margin-top:4px;font-size:11px;line-height:1.5;color:var(--forest)}
/* The illustration shares the chapter marker's top edge; the copy begins
   beneath the marker, rather than centering against the full figure. */
@media(min-width:801px){
 .connection{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);grid-template-rows:auto 1fr;column-gap:clamp(30px,4vw,51.2px);row-gap:32px;align-items:start}
 .connection>.section-marker{grid-column:1;grid-row:1;margin:0}
 .connection-layout{display:contents}
 .connection-copy{grid-column:1;grid-row:2}
 .connection-figure{grid-column:2;grid-row:1/3;align-self:start}
}
@media(min-width:801px) and (max-width:1060px){.connection{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:28px}}
@media(max-width:1060px){.connection-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px}.connection-copy h2{font-size:38px}.connection-copy p{font-size:14px}.connection-copy .connection-body{font-size:13px}}
@media(max-width:850px){.home-page #work-title{font-size:38px}}
@media(max-width:560px){.home-page #work-title{font-size:36px}}
@media(max-width:800px){.connection{padding-block:24px;margin-bottom:0}.connection-layout{grid-template-columns:1fr;gap:18px;margin-top:16px}.connection-copy{display:grid;grid-template-columns:.9fr 1.1fr;gap:10px 28px;align-items:start}.connection-copy h2{grid-row:1/3;font-size:38px}.connection-copy p{max-width:none}.connection-copy .connection-lead{margin-top:0}.connection-copy .connection-body{margin-top:0}.connection-figure{width:min(100%,620px);justify-self:center}}
@media(max-width:560px){.connection-copy{display:block}.connection-copy h2{font-size:38px}.connection-copy .connection-lead{margin-top:18px}.connection-copy .connection-body{margin-top:12px;font-size:14px}.connection-layout{gap:16px}.connection-figure figcaption{gap:12px;padding-top:10px}.connection-figure figcaption strong{font-size:11px;letter-spacing:.05em}.connection-figure figcaption span{font-size:11px}.connection-figure>img{width:calc(100% + 8px);max-width:none;margin-inline:-4px}}
/* Tablet: pair the headline with its copy, then give the illustration and
   its three choices the full width between the existing page gutters. */
@media(min-width:561px) and (max-width:1060px){
 .connection{display:block}
 .connection-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:24px}
 .connection-copy{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px 28px;align-items:start;grid-column:auto;grid-row:auto}
 .connection-copy h2{grid-column:1;grid-row:1/3}
 .connection-copy p{grid-column:2;max-width:none}
 .connection-copy .connection-lead,.connection-copy .connection-body{margin-top:0}
 .connection-figure{grid-column:auto;grid-row:auto;width:100%;max-width:none;justify-self:stretch;align-self:start}
}
.portfolio-more{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:var(--section-rule-width) solid var(--section-rule);padding:20px 0 0;margin-top:28px;color:var(--muted);font-size:12px}
.portfolio-more[hidden]{display:none}
.portfolio-more button{font-size:12px;font-weight:600;border-bottom:1px solid var(--ink);min-height:44px;padding:10px 0;color:var(--ink)}
@media(max-width:560px){.portfolio-more{font-size:11px;gap:16px}.portfolio-more button{font-size:11px}}