/**
 * Tyer pages — research-dossier skin.
 *
 * Loaded alongside gw-hook-dossier.css and gw-manufacturer.css. The fly gallery
 * is not new UI: it is the hook page's photographic-record component, same
 * markup and same gw-hook-dossier.js. Only the facets differ — subject and year
 * instead of hook part and size. Everything here is what the tyer pages need
 * that no existing page has.
 *
 * @since 1.7.9
 */

/* A tyer has no silhouette, so the dossier header runs full width. */
html body .gw-entry.gw-dossier.gw-tyer > .gw-page-header,
html body .gw-entry.gw-dossier.gw-tyer-index > .gw-page-header {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
  padding-bottom: 22px !important;
}

/* ── Tyer index ────────────────────────────────────────────────────────────── */
/* People with photographs, not 368 hooks — a card grid is the right density
   here, where a ledger is right for the catalog. */
.ty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ty-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  margin: 0;
  background: #f4f2ed;
  border: 1px solid #d5d2cb;
  color: inherit !important;
  text-decoration: none !important;
}
.ty-card:hover { border-color: var(--gwd-orange); box-shadow: inset 0 0 0 1px var(--gwd-orange); }
.ty-card:focus-visible { outline: 2px solid var(--gwd-orange); outline-offset: 2px; }
.ty-card-img { display: grid; aspect-ratio: 1 / .74; place-items: center; overflow: hidden; background: #ddd8ce; }
.ty-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ty-card-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 13px 14px; }
.ty-card-name { font: 750 18px/1.15 var(--gwd-sans); letter-spacing: -.025em; }
.ty-card-meta { color: #616b66; font: 11px/1.45 var(--gwd-serif); }
/* The count row sits on a shared baseline whether or not a tyer has a bio. */
.ty-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--gwd-line);
}
.ty-count { font: 700 14px/1 var(--gwd-serif); font-variant-numeric: tabular-nums; }
.ty-count span { color: #767e7a; font: 850 8px/1 var(--gwd-sans); letter-spacing: .06em; text-transform: uppercase; }
.ty-tag {
  padding: 2px 6px;
  color: #2f7b5a;
  background: var(--gwd-green-soft);
  font: 800 7px/1.4 var(--gwd-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ty-tag--quiet { color: #7a827e; background: #e3e0d9; }

/* ── Tyer page: biography ──────────────────────────────────────────────────── */
.ty-bio { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); align-items: start; gap: 40px; }
/* Without a portrait the biography runs the full column width rather than
   holding a narrower reading measure. */
.ty-bio.is-solo { grid-template-columns: minmax(0, 1fr); }
.ty-bio-prose > *:first-child { margin-top: 0 !important; }
.ty-bio-prose p { margin: 0 0 13px !important; color: #4d5752; font: 13px/1.7 var(--gwd-serif) !important; }
.ty-bio-prose p:first-of-type::first-letter {
  float: left;
  margin: 6px 8px 0 0;
  color: var(--gwd-ink);
  font: 700 42px/.78 var(--gwd-serif);
}
.ty-portrait { margin: 0; background: #fff; border: 1px solid #d4d1ca; }
.ty-portrait img { display: block; width: 100%; height: auto; }
.ty-portrait figcaption { padding: 9px 11px; color: #767e7a; font: 850 8px/1.3 var(--gwd-sans); letter-spacing: .08em; text-transform: uppercase; }

/* ── Single work ───────────────────────────────────────────────────────────── */
/* A filterable record over one photograph would be absurd, so a lone work is
   simply shown at size with its caption. */
.ty-single { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .7fr); align-items: start; gap: 30px; }
.ty-single figure { margin: 0; background: #fff; border: 1px solid #d4d1ca; box-shadow: 0 12px 34px rgba(31, 38, 34, .1); }
.ty-single img { display: block; width: 100%; height: auto; }
.ty-single figcaption { padding: 11px 13px; color: #616b66; font: 11px/1.45 var(--gwd-sans); letter-spacing: .05em; text-transform: uppercase; }

/* ── Hooks used ────────────────────────────────────────────────────────────── */
/* The tie back into the hook reference: which hooks this tyer works on. */
.ty-hooks { border-top: 2px solid var(--gwd-ink); }
.ty-hooks a {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 16px;
  padding: 13px 0;
  align-items: baseline;
  gap: 18px;
  border-bottom: 1px solid var(--gwd-line);
  color: inherit !important;
  text-decoration: none !important;
}
.ty-hooks a:hover { background: #e3e0d9; }
.ty-hooks a:hover .ty-hook-name { color: var(--gwd-orange); }
.ty-hook-name { font: 700 15px/1.25 var(--gwd-serif); }
.ty-hook-meta { color: #616b66; font: 11px/1.45 var(--gwd-serif); }
.ty-hook-arrow { color: #9aa19d; font: 15px/1 var(--gwd-serif); }

.ty-empty { padding: 30px 0; color: #68716d; border-top: 2px solid var(--gwd-ink); font: 13px/1.6 var(--gwd-serif); }

@media (max-width: 1000px) {
  .ty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ty-bio { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ty-single { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ty-grid { grid-template-columns: minmax(0, 1fr); }
}