/* ═══════════════════════════════════════════════════════════════
   THE PORTRAIT, ONE COMPONENT (Ian, 2026-10-21: "do the portrait style
   consistent on TFR, not just the rectangle").

   The Topic Desk's medallion is the pattern: a circle, a hairline border,
   a second hairline ring held off by a ground-coloured gap, a faintly
   sepia and grey picture cropped from the top, initials when there is no
   picture. The Verse Desk, the Traditions index and the author room all
   draw it from here. Three sizes: S 56, M 84, L 168.

     <span class="tfr-por tfr-por--m"><img data-por="<slug>" ...><span class="tfr-por-ini">AB</span></span>

   assets/js/lib/tfr-portrait.js resolves the slug, busts the cache and
   writes the source into the image's own metadata (title, alt, data-credit).
   No credit is drawn beside a picture, except for the few whose licence
   asks for one (.tfr-por-credit).

   Colours come from three tokens a page may set on an ancestor:
   --por-ground, --por-rule, --por-ink. The fallbacks are the light and
   dark Scripture-page values. Circles here are drawn marks, not pills.
   ═══════════════════════════════════════════════════════════════ */

.tfr-por {
  --por-s: 84px;
  --por-gap: calc(var(--por-s) / 21);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--por-s);
  height: var(--por-s);
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--por-rule, var(--color-rule, #d9c6a7));
  background: var(--por-ground, var(--sd-panel, #fbf8f3));
  box-shadow: 0 0 0 var(--por-gap) var(--por-ground, var(--sd-panel, #fbf8f3)), 0 0 0 calc(var(--por-gap) + 1px) var(--por-rule, var(--color-rule, #d9c6a7));
  transition: box-shadow 0.15s ease;
}
.tfr-por--s { --por-s: 56px; }
.tfr-por--m { --por-s: 84px; }
.tfr-por--l { --por-s: 168px; }
.tfr-por img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(0.55) sepia(0.3);
}
/* :where keeps this at the specificity of a page's own token rule, which loads after and wins. */
:where(html[data-sd-theme="dark"]) .tfr-por {
  --por-ground: var(--sd-dk-panel, #272824);
  --por-rule: var(--sd-dk-rule, #454740);
  --por-ink: var(--sd-dk-muted, #b0b0a8);
}
html[data-sd-theme="dark"] .tfr-por img { filter: grayscale(0.5) sepia(0.25) brightness(0.92); }
.tfr-por-ini,
.tfr-por .ini {
  font: 600 calc(var(--por-s) * 0.33) / 1 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0.04em;
  color: var(--por-ink, var(--color-muted, #6b6660));
}
.tfr-por-ini[hidden], .tfr-por .ini[hidden] { display: none; }
/* In a link, the ring takes the accent on hover and focus. */
a:is(:hover, :focus-visible) > .tfr-por,
a:is(:hover, :focus-visible) .tfr-por {
  box-shadow: 0 0 0 var(--por-gap) var(--por-ground, var(--sd-panel, #fbf8f3)), 0 0 0 calc(var(--por-gap) + 1px) var(--por-accent, var(--color-secondary, #a9472c));
}
/* Only a licence that asks for it draws a credit, quiet, under the picture. */
.tfr-por-credit {
  display: block;
  margin: 12px 0 0;
  max-width: 200px;
  font: 12px / 1.45 var(--font-body, "Source Serif Pro", Georgia, serif);
  color: var(--por-ink, var(--color-muted, #6b6660));
  text-wrap: balance;
}
.tfr-por-credit a { color: inherit; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tfr-por { transition: none; } }