/* Layer pages (site/l/*.html): the works in one layer, what is meant to grow, and a way to bring something in. */
.l-works{padding-block:clamp(32px,6vh,72px)}
.l-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px;margin-top:32px}
.l-card{display:flex;flex-direction:column;gap:18px;padding:clamp(18px,2vw,28px);border-radius:28px;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s ease}
.l-card:hover,.l-card:focus-within{transform:translateY(-4px);box-shadow:0 22px 44px rgba(30,42,36,.09)}
.l-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.l-card__k{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--k-bg);color:var(--k-fg);font-size:24px;font-weight:500}
.l-card .chips{justify-content:flex-end}
.l-chip{padding:4px 12px;border-radius:999px;background:var(--paper-2);font-size:13px;line-height:1.6}
.l-card__name{font-size:clamp(22px,2vw,28px);line-height:1.45;font-weight:500}
.l-card__name a{color:var(--ink);text-decoration:none}
.l-card__name a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.l-card{position:relative}
.l-card__lead{font-size:15px;line-height:1.9;color:var(--body)}
.l-stats{display:flex;flex-wrap:wrap;gap:6px 22px;padding-block:14px;border-block:1px solid var(--line)}
.l-stats li{display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--muted)}
.l-stats .lat{font-size:clamp(24px,2.4vw,34px);font-weight:300;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.l-card__links{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin-top:auto}
.l-card__app{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:700;color:var(--body);text-decoration:none}
.l-card__app:hover{color:var(--ink)}
.l-empty{padding:28px;border-radius:20px;border:1.5px dashed var(--line);color:var(--muted)}
.l-next{padding-block:clamp(32px,6vh,72px)}
.l-next__list{margin-top:24px;border-top:1px solid var(--line)}
.l-next__list li{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:8px 24px;padding-block:16px;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink)}
.l-next__w{font-size:13px;font-weight:700;color:var(--k-fg,var(--leaf))}
.l-join{padding-block:clamp(32px,6vh,72px) clamp(40px,7vh,88px)}
.l-join__card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:clamp(24px,4vw,56px);border-radius:32px;background:var(--sage)}
.l-join__h{margin-top:12px;font-size:clamp(24px,2.8vw,40px);line-height:1.4;font-weight:500;text-wrap:balance}
.l-join__p{max-width:30em;margin-top:12px;color:var(--body)}
.pager__n{display:block;font-size:12px;font-weight:400;color:var(--muted)}
@media (max-width:700px){
  .l-next__list li{grid-template-columns:minmax(0,1fr)}
}

.l-card__body{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;padding:clamp(4px,.6vw,10px) clamp(4px,.8vw,12px) 6px}
.l-card__shot{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2);aspect-ratio:16/10}
.l-card__shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.l-card:hover .l-card__shot img{transform:scale(1.04)}
.l-card--feature{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(20px,3vw,48px);align-items:center}
.l-card--feature .l-card__name{font-size:clamp(26px,3vw,42px)}
.l-card--feature .l-card__lead{font-size:17px}
.l-card--feature .l-stats{gap:8px 28px}
.l-card--feature .l-stats .lat{font-size:clamp(30px,3.4vw,48px)}
@media (min-width:901px){
  .l-grid:has(.l-card--feature){grid-template-columns:minmax(0,1fr)}
  .l-card--feature.has-shot{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .l-card--feature.has-shot .l-card__shot{order:2;aspect-ratio:4/3}
  .l-card--feature:not(.has-shot){max-width:760px}
}