/* ── intro ──────────────────────────────────────────────────────────── */
.intro{padding-top:33px}
.intro__grid{
  display:grid;grid-template-columns:minmax(0,826px) minmax(0,413px);gap:69px;
  align-items:start;margin-top:50px;
}
.intro h1{
  margin:36px 0 0;font-family:var(--serif);font-weight:700;
  font-size:108px;line-height:.9;letter-spacing:-7.56px;
}
.intro__side{padding-top:34px}
.lede{margin:0;font-size:19px;line-height:29.5px;letter-spacing:-.45px;color:var(--ink-2)}
.kicker{
  margin:24px 0 0;font-weight:900;font-size:11px;line-height:19.8px;
  letter-spacing:1.38px;color:var(--ink-4);
}

/* ── filters ────────────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:56px 0 0}
.chip{
  font-family:var(--sans);font-weight:700;font-size:13px;line-height:18px;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border:1px solid #e4e4e4;border-radius:999px;
  background:#fff;color:var(--ink);cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.chip i{font-style:normal;font-weight:900;font-size:10px;color:var(--ink-4)}
.chip:hover{border-color:#c9d2dd}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.is-on i{color:rgba(255,255,255,.6)}

/* ── mosaic ─────────────────────────────────────────────────────────── */
.mosaic{margin-top:28px;padding-bottom:96px}
.row{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.tile{
  /* --share is this tile's slice of the row once the 12px gaps are removed,
     so every tile in a row lands on the same height */
  flex:0 0 auto;
  width:calc((100% - (var(--n) - 1) * 12px) * var(--share));
  aspect-ratio:var(--ar);
  position:relative;overflow:hidden;border-radius:4px;
  background:var(--paper);border:0;padding:0;margin:0;cursor:zoom-in;
  font:inherit;color:inherit;text-align:left;
}
.tile img{position:absolute;object-fit:fill;max-width:none}
.tile .cap{
  position:absolute;left:16px;bottom:16px;max-width:calc(100% - 32px);
  background:rgba(5,7,11,.78);border-radius:6px;padding:10px 14px 12px;
  color:#fff;opacity:0;transform:translateY(6px);
  transition:opacity .22s ease,transform .22s ease;pointer-events:none;
}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1;transform:none}
.tile:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.cap b{display:block;font-weight:700;font-size:13px;line-height:18px}
.cap em{
  display:block;font-style:normal;font-weight:400;font-size:11px;
  line-height:15.9px;letter-spacing:.05px;color:rgba(255,255,255,.72);
}
.tile[hidden]{display:none}
.empty{
  margin:48px 0;text-align:center;color:var(--ink-4);
  font-weight:900;font-size:11px;letter-spacing:1.38px;
}

/* rows stop being meaningful once tiles wrap, so let them reflow */
@media (max-width:1000px){
  .intro__grid{grid-template-columns:1fr;gap:32px}
  .intro h1{font-size:64px;letter-spacing:-3.6px}
  .intro__side{padding-top:0}
  .row{flex-wrap:wrap}
  .tile{flex:0 1 calc(50% - 6px)}
  .tile .cap{opacity:1;transform:none}
}

/* ── lightbox ───────────────────────────────────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:rgba(5,7,11,.92);padding:48px;
}
.lightbox[hidden]{display:none}
.lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.lb__fig img{max-width:min(1100px,86vw);max-height:76vh;width:auto;border-radius:4px}
.lb__fig figcaption{text-align:center;color:#fff}
.lb__fig b{display:block;font-weight:700;font-size:15px;line-height:22px}
.lb__fig em{
  display:block;font-style:normal;font-size:12px;line-height:18px;
  color:rgba(255,255,255,.66);margin-top:2px;
}
.lb__close,.lb__nav{
  position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;
  cursor:pointer;border-radius:999px;line-height:1;
}
.lb__close{top:24px;right:24px;width:44px;height:44px;font-size:26px}
.lb__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:30px}
.lb__prev{left:24px}
.lb__next{right:24px}
.lb__close:hover,.lb__nav:hover{background:rgba(255,255,255,.2)}
@media (max-width:700px){
  .lightbox{padding:16px}
  .lb__nav{width:42px;height:42px;font-size:24px}
  .lb__prev{left:8px}.lb__next{right:8px}
}