/* "What we buy" — square photo grid with a lightbox.
   Uses the site's own tokens, so it follows the light/dark toggle. */

/* ---------- intro ---------- */
.wwb-intro{padding:clamp(2rem,5vw,3.5rem) 0 clamp(1.5rem,3vw,2rem)}
.crumbs{
  display:flex;gap:.5rem;align-items:center;margin-bottom:1.4rem;
  font-size:.8125rem;color:var(--color-text-faint);
}
.crumbs a{color:var(--color-text-muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:2px}
.wwb-eyebrow{
  margin:0 0 .9rem;font-size:.75rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--color-primary);
}
.wwb-intro h1{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem,5.2vw,3.25rem);line-height:1.05;letter-spacing:-.022em;
}
.wwb-lede{
  margin:1.2rem 0 0;max-width:40rem;
  font-size:clamp(1rem,1.8vw,1.125rem);color:var(--color-text-muted);
}
.wwb-badges{
  display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 0;padding:0;list-style:none;
}
.wwb-badges li{
  padding:.4rem .8rem;border:1px solid var(--color-border);border-radius:999px;
  background:var(--color-surface-offset);font-size:.8125rem;color:var(--color-text-muted);
}
.wwb-cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

/* ---------- jump nav ---------- */
.wwb-jump{
  display:flex;gap:.55rem;flex-wrap:wrap;
  padding:1.15rem 0 1.25rem;margin-bottom:.25rem;
  border-top:1px solid var(--color-divider);
}
.wwb-jump a{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 1.1rem;border-radius:999px;
  border:1px solid var(--color-primary);
  background:color-mix(in srgb, var(--color-primary) 12%, transparent);
  color:var(--color-primary);
  font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;
  transition:background .18s, color .18s, transform .18s, box-shadow .18s;
}
.wwb-jump a svg{flex:none;transition:transform .18s}
.wwb-jump a:hover{
  background:var(--color-primary);color:var(--color-text-inverse);
  transform:translateY(-1px);box-shadow:0 6px 16px -8px var(--color-primary);
}
.wwb-jump a:hover svg{transform:translateY(2px)}
.wwb-jump a:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}

/* ---------- grid ---------- */
.gallery{padding-bottom:clamp(2rem,5vw,3rem)}
.gallery-loading{padding:3rem 0;color:var(--color-text-faint);font-size:.9375rem}

.gsec{padding:clamp(2rem,4.5vw,3rem) 0 0}
.gsec-head{
  display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline;margin-bottom:.35rem;
}
.gsec-head h2{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.35rem,2.7vw,1.875rem);letter-spacing:-.016em;
}
.gsec-count{
  font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text-faint);
}
.gsec-blurb{margin:0 0 1.5rem;max-width:38rem;color:var(--color-text-muted);font-size:.9375rem}

.grid{
  display:grid;gap:clamp(.4rem,1.2vw,.75rem);
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  list-style:none;margin:0;padding:0;
}
.grid li{margin:0}
.tile{
  display:block;position:relative;width:100%;aspect-ratio:1/1;
  padding:0;border:1px solid var(--color-border);border-radius:6px;
  overflow:hidden;cursor:zoom-in;background:var(--color-surface-2);
  transition:border-color .2s, transform .2s;
}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile:hover{border-color:var(--color-primary);transform:translateY(-2px)}
.tile:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.tile-cap{
  position:absolute;inset:auto 0 0;padding:1.6rem .6rem .5rem;
  background:linear-gradient(180deg,rgba(6,7,9,0) 0%,rgba(6,7,9,.86) 62%);
  color:#f2f0ec;font-size:.75rem;line-height:1.3;text-align:left;
  opacity:0;transform:translateY(4px);transition:opacity .22s, transform .22s;
}
.tile:hover .tile-cap,.tile:focus-visible .tile-cap{opacity:1;transform:none}
.tile-badge{
  position:absolute;top:.45rem;left:.45rem;
  padding:.18rem .45rem;border-radius:4px;
  background:rgba(6,7,9,.78);color:#e9b23e;
  font-size:.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
@media (hover:none){
  .tile-cap{opacity:1;transform:none;padding-top:1.3rem}
}

/* empty section */
.gsec-empty{
  padding:clamp(1.75rem,4vw,2.5rem);border:1px dashed var(--color-border);
  border-radius:12px;background:var(--color-surface-offset);
  color:var(--color-text-muted);font-size:.9375rem;
}
.gsec-empty strong{display:block;margin-bottom:.4rem;color:var(--color-text);font-weight:600}
.gsec-empty a{color:var(--color-primary);font-weight:500}

/* ---------- closing block ---------- */
.wwb-close{
  margin-top:clamp(2rem,5vw,3.5rem);padding:clamp(2.25rem,5vw,3.5rem) 0;
  border-top:1px solid var(--color-divider);background:var(--color-surface-offset);
}
.wwb-close h2{
  margin:0 0 .8rem;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.018em;
}
.wwb-close p{margin:0;max-width:40rem;color:var(--color-text-muted)}
.wwb-privacy{
  display:flex;gap:.6rem;align-items:flex-start;margin-top:1.75rem;
  font-size:.8125rem;line-height:1.6;color:var(--color-text-faint);
}
.wwb-privacy svg{flex:none;margin-top:.1rem;color:var(--color-text-muted)}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  padding:clamp(.75rem,3vw,2.5rem);
  background:rgba(6,7,9,.93);backdrop-filter:blur(6px);
  animation:lb-in .18s ease-out;
}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb[hidden]{display:none}
.lb-stage{margin:0;display:flex;flex-direction:column;gap:.85rem;max-width:100%;max-height:100%}
.lb-stage img{
  max-width:100%;max-height:calc(100vh - 9rem);max-height:calc(100dvh - 9rem);
  width:auto;height:auto;object-fit:contain;border-radius:8px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.9);background:#12141a;
}
.lb-cap{
  display:flex;gap:1rem;align-items:baseline;justify-content:space-between;
  color:#e9e7e2;font-size:.875rem;
}
.lb-cap-text strong{display:block;font-weight:600}
.lb-cap-text span{display:block;margin-top:.15rem;color:#9a9ba3;font-size:.8125rem}
.lb-count{flex:none;color:#7c7e86;font-size:.75rem;letter-spacing:.06em}
.lb-close,.lb-nav{
  position:absolute;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(22,24,30,.88);border:1px solid #333845;color:#e9e7e2;
  transition:background .18s, color .18s;
}
.lb-close:hover,.lb-nav:hover{background:var(--color-primary);color:#14151a;border-color:var(--color-primary)}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:2px solid #e9b23e;outline-offset:2px}
.lb-close{top:clamp(.6rem,2vw,1.25rem);right:clamp(.6rem,2vw,1.25rem)}
.lb-prev{left:clamp(.4rem,2vw,1.5rem);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(.4rem,2vw,1.5rem);top:50%;transform:translateY(-50%)}
.lb-nav[disabled]{opacity:.3;cursor:default}
.lb-nav[disabled]:hover{background:rgba(22,24,30,.88);color:#e9e7e2;border-color:#333845}
body.lb-open{overflow:hidden}

@media (max-width:560px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem}
  .tile{border-radius:4px}
  .tile-cap{display:none}
  .lb-prev{left:.4rem}
  .lb-next{right:.4rem}
  .lb-nav,.lb-close{width:40px;height:40px}
  .lb-stage img{max-height:calc(100dvh - 11rem)}
  .wwb-cta-row .btn{flex:1 1 100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .lb{animation:none}
  .tile,.tile-cap{transition:none}
  .tile:hover{transform:none}
}