/* ==========================================================================
   KF Crafts — /projects/ (12.10.2026): an editorial gallery. Written for seo/gen-pages.mjs block "8 · projects";
   loaded after css/pages.css on that page only (tokens, .wrap, .eyebrow, .h2 and .tag come from there).
   Ink ground, champagne for a line or a number, hairline rules, square corners, Jost light. Photographs are never
   cropped in the grid (the rows are justified to each picture's own ratio); only the lead picture and the three
   full-bleed bands are cropped to a wide frame, and the lightbox always shows the whole photograph.
   Nothing moves while it loads: every picture has its real width and height, and every frame holds a fixed ratio.
   ========================================================================== */

/* ---------- the kinds-of-work nav (sticks under the top bar) ---------- */
.pj-nav {
  position: sticky;
  top: var(--top-h);
  z-index: 15;
  border-bottom: 1px solid var(--rule);
  background: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}
.pj-nav ul {
  display: flex;
  gap: 0 clamp(1.25rem, 3vw, 2.25rem);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.pj-nav ul::-webkit-scrollbar { display: none; }
.pj-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  border-bottom: 1px solid transparent;
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s;
}
.pj-nav a[aria-current="true"] { border-bottom-color: var(--champagne); color: var(--champagne); }
@media (hover: hover) { .pj-nav a:hover { color: var(--champagne); } }
.pj-nav__n { color: var(--muted); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.04em; }

/* ---------- a kind of work ---------- */
.pj { padding-block: var(--sec-pad); scroll-margin-top: calc(var(--top-h) + 3.25rem); }
.pj + .pj { border-top: 1px solid var(--rule); }
.pj__head { display: grid; gap: 0.9rem; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.pj__head .h2 { max-width: 20ch; }
.pj__intro { display: grid; gap: 0.9rem; color: var(--text); font-size: 1rem; font-weight: 300; line-height: 1.6; }
.pj__intro p { max-width: 34rem; }
.pj__count {
  color: var(--text-dim);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pj__count span { color: var(--champagne); font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 900px) {
  .pj__head { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; column-gap: var(--col-gap); }
  .pj__head .eyebrow { grid-column: 1 / -1; }
  .pj__head .h2 { grid-column: 1 / 8; }
  .pj__head .pj__intro { grid-column: 8 / 13; }
}

/* ---------- the grid: rows justified to each picture's own ratio (--ar), never cropped ---------- */
.pj__grid {
  --row: clamp(10.25rem, 28vw, 12rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.25rem) var(--col-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pj__grid::after { content: ""; flex: 999 1 0; }   /* keeps the last row from stretching */
.pj__item { flex: var(--ar) 1 calc(var(--ar) * var(--row)); min-width: 0; }
.pj__item--lead { flex: 1 0 100%; }
@media (min-width: 700px) { .pj__grid { --row: clamp(14rem, 24vw, 19rem); } }
@media (min-width: 1100px) { .pj__grid { --row: 22rem; } }

.pj__open { position: relative; display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.pj__open:focus-visible { outline-offset: 4px; }
.pj__frame { display: block; aspect-ratio: var(--ar); overflow: hidden; background: var(--ink-2); }
.pj__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.pj__item--lead .pj__frame { aspect-ratio: 4 / 3; }
@media (min-width: 700px) { .pj__item--lead .pj__frame { aspect-ratio: 3 / 2; } }
@media (min-width: 1000px) { .pj__item--lead .pj__frame { aspect-ratio: 16 / 9; } }
@media (hover: hover) { .pj__open:hover .pj__frame img, .pj__open:hover .pj-band__frame img { transform: scale(1.03); } }

/* two lines under every picture: what it is, then what kind of work and where */
.pj__cap { display: grid; gap: 0.3rem; margin-top: 0.7rem; color: var(--text); font-size: 0.875rem; font-weight: 300; line-height: 1.4; }
.pj__meta {
  display: block;
  color: var(--text-dim);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ---------- full-bleed bands (edge to edge, between kinds of work) ---------- */
.pj-band { position: relative; margin: 0; border-block: 1px solid var(--rule); }
.pj-band__open { display: block; position: relative; }
.pj-band__frame { display: block; aspect-ratio: var(--ar); overflow: hidden; background: var(--ink-2); }
.pj-band__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
@media (min-width: 900px) { .pj-band__frame { aspect-ratio: var(--dar, 16 / 9); max-height: 88svh; } }
.pj-band__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding-block: 0.9rem 0.25rem;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 300;
}
.pj-band + .pj { border-top: 0; }
.pj + .pj-band { margin-top: 0; }
.pj-band__open .tag { bottom: 0.75rem; right: max(var(--gutter), 0.75rem); }

/* ---------- the lightbox (js/projects.js builds it on first use) ---------- */
html.pj-lock { overflow: hidden; }
.pj-lb {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--gutter), env(safe-area-inset-left));
  border: 0;
  background: rgba(8, 8, 8, 0.97);
  color: var(--paper);
  overscroll-behavior: contain;
}
.pj-lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: pj-fade 0.35s var(--ease-out); }
.pj-lb::backdrop { background: rgba(0, 0, 0, 0.85); }
.pj-lb__bar, .pj-lb__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.pj-lb__count { color: var(--text-dim); font-size: 0.75rem; letter-spacing: 0.18em; font-variant-numeric: lining-nums tabular-nums; }
.pj-lb__stage { position: relative; min-height: 0; touch-action: pan-y pinch-zoom; }
.pj-lb__img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 0.35s var(--ease-out);
}
.pj-lb__img.is-loading { opacity: 0; }
.pj-lb__text { min-width: 0; display: grid; gap: 0.2rem; font-size: 0.875rem; font-weight: 300; }
.pj-lb__meta { color: var(--champagne); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.pj-lb__nav { display: flex; gap: 0.5rem; flex: none; }
.pj-lb__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.pj-lb__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
@media (hover: hover) { .pj-lb__btn:hover { border-color: var(--line-strong); color: var(--champagne); } }
@keyframes pj-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pj__frame img, .pj-band__frame img, .pj-lb__img { transition: none; }
  .pj-lb[open] { animation: none; }
  .pj__open:hover .pj__frame img, .pj__open:hover .pj-band__frame img { transform: none; }
}