/* ==========================================================================
   COMPONENTS · PUBLICATION MARK — the colophon device + wordmark. A small
   rubric lozenge (the only place the sacred spot becomes an object) sits
   against the OFFPRINT wordmark set in tracked serif. This is the publication's
   signature, reused in the masthead and the nav.
   ========================================================================== */

.op-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  color: var(--text);
  line-height: 1;
}

/* The rubric device — a pressed lozenge, the publication's seal in miniature.
   The wordmark is all-caps, so its visible mass centres on the cap-height — a
   touch above the line-box centre that flex alignment uses. The translateY
   lifts the lozenge onto that optical centre so it reads level with the caps. */
.op-mark__device {
  inline-size: 0.62em;
  block-size: 0.62em;
  background: var(--accent);
  transform: translateY(-0.12em) rotate(45deg);
  box-shadow: var(--shadow-emboss);
  flex: none;
}

.op-mark__name {
  font-family: var(--font-reading);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* The small running mark used in the nav / footer */
.op-mark--sm .op-mark__name { font-size: var(--text-sm); }

/* The large mark used on the issue cover */
.op-mark--lg .op-mark__name { font-size: var(--text-lg); letter-spacing: var(--tracking-caps-wide); }

.op-mark:hover .op-mark__name { color: var(--accent); }
.op-mark:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }