/* portfolio.css — the made-work gallery (PORTFOLIO-SPEC-REV1 §3).
   Loaded by build.js on /portfolio only, alongside exhibit.css: the zoom
   lightbox is reused wholesale (a.exhibit-zoom / .exhibit-hint / the <dialog>
   in assets/js/exhibit-zoom.js), so nothing here restyles it.

   The doctrine this file obeys: the photographs are the eye candy, the chrome
   stays minimal (§3, §7). So there are no cards, no shadows competing with the
   photography, no hover lift — a hairline gold frame, and the caption set in
   the house mono below it, the same grammar the exhibit figures use. */

.pf-intro { max-width: var(--measure); }

/* ---------- the grid ---------- */
/* auto-fill rather than a fixed column count: one piece is not a lonely
   third of a row, and a dozen pieces are not four cramped columns on a
   laptop. 21rem is about the width at which a knife photographed on the
   long axis still reads. */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 2.4rem 1.6rem;
  margin: 2.2rem 0 0;
}

.pf-piece { margin: 0; display: flex; flex-direction: column; }

/* ---------- the shots ---------- */
/* One piece may carry several photographs. The first is the piece as you meet
   it and gets the whole cell; the rest sit under it as a contact strip. No
   carousel, no slideshow: every shot is its own zoom trigger, which is the
   only thing the reused lightbox knows how to do. */
.pf-shots { display: grid; gap: 6px; }

/* auto-fill, not a fixed count: two extra shots are two thumbs, not two
   half-width photographs, and six wrap onto a second row on their own. */
.pf-more {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 6px;
}

.pf-shot img {
  width: 100%; height: auto; display: block;
  background: var(--paper-panel);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  /* Frame the photograph, don't dramatise it — one hairline and a whisper
     of depth, well under the exhibit plate's. */
  box-shadow: 0 1px 10px rgba(34, 28, 25, 0.10);
}
/* The strip is supporting evidence; keep it out of the way until wanted.
   A fixed box, cropped: shots of one piece come off the camera at whatever
   crop each needed, and a strip of ragged heights reads as a broken
   component rather than as a set. The uncropped frame is one click away. */
.pf-more .pf-shot img {
  opacity: 0.85;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.pf-more .pf-shot:hover img,
.pf-more .pf-shot:focus-visible img { opacity: 1; }

/* exhibit.css sizes its hint for a full-column plate. In a grid cell that
   badge is the loudest thing on the page, so it shrinks and waits for a
   hover; on the thumbs there is no room for it at all. */
.pf-shot .exhibit-hint {
  right: 0.4rem; bottom: 0.4rem;
  font-size: 0.58rem; letter-spacing: 0.12em;
  padding: 0.3rem 0.42rem 0.26rem;
  opacity: 0; transition: opacity 0.15s ease;
}
.pf-shot:hover .exhibit-hint,
.pf-shot:focus-visible .exhibit-hint { opacity: 0.9; }
.pf-more .exhibit-hint { display: none; }

/* ---------- the caption ---------- */
.pf-cap { display: block; margin: 0.85rem 0 0; }
.pf-title {
  display: block;
  font-family: var(--disp); font-weight: 600; font-size: 1.22rem;
  letter-spacing: 0.06em; line-height: 1.2; color: var(--ink);
}
.pf-spec {
  display: block; margin-top: 0.28rem;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.pf-note {
  display: block; margin-top: 0.5rem;
  font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft);
}
/* The one place Portfolio touches commerce is by pointing away from itself:
   Portfolio never sells (P2), the line page does. Oxblood, the house action
   colour — green would read as a bench-verified claim it has no business
   making. */
.pf-line {
  display: inline-block; margin-top: 0.55rem;
  font-family: var(--disp); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--oxblood); text-decoration: none;
  border-bottom: 1px solid var(--gold); padding-bottom: 1px;
}
.pf-line:hover { color: var(--oxblood-deep); border-bottom-color: var(--gold-dim); }

/* ---------- empty state ---------- */
/* Not an error and not a placeholder — the page is finished, the photographs
   are not yet curated. Set quietly, in the body face, so it reads as a
   sentence rather than as a broken component. */
.pf-empty {
  max-width: var(--measure);
  color: var(--ink-soft); font-style: italic;
  border-left: 3px solid color-mix(in srgb, var(--gold) 55%, transparent);
  padding: 0.2rem 0 0.2rem 1rem; margin: 2.2rem 0 0;
}

@media (max-width: 40rem) {
  .pf-grid { grid-template-columns: 1fr; gap: 2rem; }
}