/* V13 — Selected Works editorial gallery. Does not change FrameShift scenes. */
.selected-works{
  border-bottom:1px solid #aab9aa;
  padding:clamp(45px,6vw,88px) 0 clamp(105px,11vw,160px);
  scroll-margin-top:65px;
}
.works-eyebrow{font-size:10px;font-weight:600;letter-spacing:.2em;color:#516c55}
.works-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.62fr);gap:30px 70px;align-items:end}
.works-intro h2{font-size:clamp(62px,8.4vw,138px);font-weight:500;line-height:.86;letter-spacing:-.087em;margin:26px 0 0;color:#202c24}
.works-intro p{max-width:410px;font-size:clamp(14px,1.2vw,17px);line-height:1.75;color:#576b5a;margin:0 0 8px}
.works-toolbar{margin:clamp(54px,6vw,94px) 0 26px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid #a4b5a7;padding-top:23px}
.works-filters{display:flex;align-items:center;gap:8px 28px;flex-wrap:wrap}
.works-filter{border:0;border-bottom:1px solid transparent;padding:9px 0 12px;background:none;color:#738575;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:color .2s,border-color .2s}
.works-filter:hover,.works-filter:focus-visible,.works-filter[aria-pressed=true]{color:#1c3322;border-bottom-color:#23432a}
.works-count{color:#647c6b;font-size:10px;letter-spacing:.12em;font-variant-numeric:tabular-nums;text-transform:uppercase}
.works-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(38px,4vw,70px) clamp(20px,3vw,55px)}
.work-card{min-width:0;position:relative}
.work-card[hidden]{display:none!important}
.work-card__button{display:block;text-align:left;width:100%;padding:0;margin:0;color:#203027;border:0;background:transparent}
.work-card__media{display:block;position:relative;width:100%;aspect-ratio:4/4.55;overflow:hidden;background:#46554a}
.work-card__media:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,19,13,.28),transparent 34%);pointer-events:none}
.work-card__media img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.005);transition:transform .9s cubic-bezier(.22,1,.36,1),filter .7s;filter:saturate(.95)}
.work-card__button:hover img,.work-card__button:focus-visible img{transform:scale(1.065);filter:saturate(1.02)}
.work-card__overline{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-top:19px;border-top:1px solid #9fb29f;margin-top:19px;font-size:10px;font-weight:600;letter-spacing:.12em;color:#526c58}
.work-card__heading{margin:14px 0 5px;font-size:clamp(29px,3.2vw,48px);font-weight:500;letter-spacing:-.065em;line-height:1.07}
.work-card__description{margin:10px 0 0;max-width:470px;font-size:13px;line-height:1.7;color:#607160}
.work-card__action{display:inline-flex;align-items:center;justify-content:center;position:absolute;right:22px;bottom:22px;width:46px;height:46px;border:1px solid #f1f1e7b5;color:#f8f9f4;border-radius:50%;font-size:20px;line-height:1;background:rgba(18,34,24,.19);backdrop-filter:blur(8px);transform:translateY(7px);opacity:.82;transition:transform .35s,opacity .35s}
.work-card__button:hover .work-card__action,.work-card__button:focus-visible .work-card__action{transform:translateY(0);opacity:1}
.works-grid[data-filter="all"] .work-card:first-child{grid-column:1/-1}
.works-grid[data-filter="all"] .work-card:first-child .work-card__media{aspect-ratio:16/8.4}
.works-grid[data-filter="all"] .work-card:first-child .work-card__heading{font-size:clamp(35px,4.2vw,64px)}
.works-grid[data-filter="all"] .work-card:first-child .work-card__media img{object-position:center 51%}
.works-grid:not([data-filter="all"]){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.works-foot{margin-top:clamp(48px,5vw,80px);border-top:1px solid #adbcad;padding-top:25px;display:flex;justify-content:space-between;gap:30px;align-items:center;flex-wrap:wrap}
.works-foot p{font-size:12px;color:#697e6d;line-height:1.7;max-width:550px;margin:0}
.works-foot a{text-transform:uppercase;font-size:10px;letter-spacing:.14em;font-weight:600;text-decoration:none;border-bottom:1px solid #3a5d40;padding:9px 0;color:#23402c}
.works-foot a:hover{color:#5a7a5e}
@media(max-width:850px){
  .works-intro{grid-template-columns:1fr;gap:25px}
  .works-intro p{max-width:620px}
  .work-card__action{opacity:1;transform:none}
}
@media(max-width:600px){
  .selected-works{padding-top:22px;padding-bottom:95px}
  .works-intro h2{font-size:clamp(57px,13.6vw,86px)}
  .works-toolbar{margin-top:45px;align-items:flex-start}
  .works-filters{gap:7px 15px}
  .works-filter{font-size:9px}
  .works-grid,.works-grid:not([data-filter="all"]){grid-template-columns:1fr;gap:42px}
  .works-grid[data-filter="all"] .work-card:first-child{grid-column:auto}
  .works-grid[data-filter="all"] .work-card:first-child .work-card__media{aspect-ratio:4/4.4}
  .work-card__media{aspect-ratio:4/4.4}
  .work-card__heading,.works-grid[data-filter="all"] .work-card:first-child .work-card__heading{font-size:clamp(28px,8vw,43px)}
  .work-card__action{right:13px;bottom:13px;width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
  .work-card__media img,.work-card__action,.works-filter{transition:none!important;transform:none!important}
}

/* V16 — equal editorial project cards, including the first project.
   Remove the exceptional full-width tile; all projects align on one rhythm. */
.works-grid[data-filter="all"] .work-card:first-child{grid-column:auto}
.works-grid[data-filter="all"] .work-card:first-child .work-card__media{aspect-ratio:4/4.55}
.works-grid[data-filter="all"] .work-card:first-child .work-card__heading{font-size:clamp(29px,3.2vw,48px)}
.works-grid[data-filter="all"] .work-card:first-child .work-card__media img{object-position:center}
.works-grid .work-card__media{aspect-ratio:4/4.55}
@media(max-width:600px){
 .works-grid[data-filter="all"] .work-card:first-child .work-card__media,
 .works-grid .work-card__media{aspect-ratio:4/4.4}
 .works-grid[data-filter="all"] .work-card:first-child .work-card__heading{font-size:clamp(28px,8vw,43px)}
}

/* V21: prevent a dangling lone tile when a filter contains an odd number of projects. */
@media(min-width:601px){
 .works-grid .work-card--last-odd{grid-column:1/-1;width:calc((100% - clamp(20px,3vw,55px)) / 2);justify-self:center}
}