/* ============================================================
   ARTICLE MASTHEAD — refined meta line
   Builds on v58's .pz-article-meta. Tighter, more authored.
   ============================================================ */

body.pz-clean-post .pz-article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pz-mute, #78716c);
  margin: 0 auto 2rem;
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--pz-line, rgba(28, 25, 23, 0.08));
  max-width: 56ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body.pz-clean-post .pz-article-meta__kind {
  color: var(--pz-orange, #c2410c);
  font-weight: 600;
}

body.pz-clean-post .pz-article-meta__author {
  color: var(--pz-ink, #1c1917);
  letter-spacing: 0.18em;
}

body.pz-clean-post .pz-article-meta__divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pz-mute-2, #a8a29e);
  flex: 0 0 4px;
}

body.pz-clean-post .pz-article-meta__filed {
  /* "Filed from Cappadocia" — injected by JS from page metadata */
}


/* ============================================================
   ARTICLE COLOPHON — publication signature
   Three centered lines beneath the ◆◆◆ end ornament.
   ============================================================ */

body.pz-clean-post .pz-colophon {
  max-width: 56ch;
  margin: 1rem auto 4rem;
  padding-top: 0.4rem;
  text-align: center;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pz-mute, #78716c);
  font-size: 0.7rem;
  font-weight: 500;
}

body.pz-clean-post .pz-colophon__name {
  color: var(--pz-ink, #1c1917);
  font-weight: 600;
  margin: 0 0 0.4em;
}

body.pz-clean-post .pz-colophon__volume {
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.4em;
}

body.pz-clean-post .pz-colophon__tag {
  color: var(--pz-orange, #c2410c);
  font-weight: 500;
}

body.pz-clean-post .pz-colophon__tag .pz-colophon__sep {
  color: var(--pz-mute-2, #a8a29e);
  margin: 0 0.35em;
}

/* The end-ornament from v58 sits closer to the colophon */
body.pz-clean-post .pz-article-end {
  margin-bottom: 1.2rem !important;
}


/* ============================================================
   FOCUS RING — one canonical ring, everywhere
   ============================================================ */

*:focus-visible {
  outline: 2px solid rgba(194, 65, 12, 0.55) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}


/* ============================================================
   HOVER EDGE CASES — premium polish on filter / quiz / compare
   ============================================================ */

/* Filter chips (used on /explore/ and other discovery surfaces) */
.pz-explore__chip,
.pz-explore__filter button,
.pz-filter-btn,
.pz-quiz__chip,
.pz-fyt__chip,
.pz-quiz button[data-value] {
  font-family: "Inter", sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  background: rgba(28, 25, 23, 0.04) !important;
  color: var(--pz-ink, #1c1917) !important;
  border: 1px solid var(--pz-line, rgba(28, 25, 23, 0.08)) !important;
  border-radius: 999px !important;
  padding: 0.55em 1.05em !important;
  transition:
    background var(--pz-t-micro, 180ms) var(--pz-ease-std, cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--pz-t-micro, 180ms) var(--pz-ease-std, cubic-bezier(0.4, 0, 0.2, 1)),
    color var(--pz-t-micro, 180ms) var(--pz-ease-std, cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--pz-t-micro, 180ms) var(--pz-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) !important;
}

.pz-explore__chip:hover,
.pz-explore__filter button:hover,
.pz-filter-btn:hover,
.pz-quiz__chip:hover,
.pz-fyt__chip:hover,
.pz-quiz button[data-value]:hover {
  background: rgba(254, 215, 170, 0.4) !important;
  border-color: rgba(194, 65, 12, 0.3) !important;
  color: var(--pz-orange, #c2410c) !important;
}

.pz-explore__chip[aria-pressed="true"],
.pz-explore__chip.is-active,
.pz-filter-btn.is-active,
.pz-quiz__chip.is-active,
.pz-fyt__chip.is-active,
.pz-quiz button[data-value].is-active {
  background: var(--pz-ink, #1c1917) !important;
  color: var(--pz-paper, #fafaf9) !important;
  border-color: var(--pz-ink, #1c1917) !important;
}

.pz-explore__chip:active,
.pz-quiz__chip:active,
.pz-fyt__chip:active {
  transform: translate3d(0, 1px, 0) !important;
}

/* Compare dropdowns */
.pz-compare select,
.pz-compare__pick {
  font-family: "Inter", sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--pz-ink, #1c1917) !important;
  background: rgba(28, 25, 23, 0.04) !important;
  border: 1px solid var(--pz-line, rgba(28, 25, 23, 0.08)) !important;
  border-radius: 8px !important;
  padding: 0.7em 1em !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2378716c' stroke-width='1.5'><path d='M1 1l5 5 5-5'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
  transition:
    background-color var(--pz-t-micro, 180ms) var(--pz-ease-std, cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--pz-t-micro, 180ms) var(--pz-ease-std, cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--pz-t-micro, 180ms) var(--pz-ease-std, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

.pz-compare select:hover,
.pz-compare__pick:hover {
  border-color: rgba(28, 25, 23, 0.18) !important;
}

.pz-compare select:focus,
.pz-compare__pick:focus {
  background: var(--pz-paper, #fafaf9) !important;
  border-color: rgba(194, 65, 12, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.08) !important;
  outline: 0 !important;
}

/* Heart toggle on cards — refined hover and press */
.pz-heart,
.pz-card .pz-heart,
.pz-heart-btn {
  background: rgba(255, 254, 252, 0.92) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  transition:
    transform var(--pz-t-micro, 180ms) var(--pz-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    background var(--pz-t-micro, 180ms) var(--pz-ease-std, cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--pz-t-micro, 180ms) var(--pz-ease-std, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

.pz-heart:hover,
.pz-heart-btn:hover {
  background: rgba(255, 254, 252, 1) !important;
  border-color: rgba(194, 65, 12, 0.4) !important;
}

.pz-heart.is-saved svg,
.pz-heart.is-saved path,
.pz-heart-btn.is-saved svg,
.pz-heart-btn.is-saved path,
.pz-heart.is-active svg,
.pz-heart.is-active path {
  fill: var(--pz-orange, #c2410c) !important;
  color: var(--pz-orange, #c2410c) !important;
}


/* ============================================================
   PHOTOGRAPHIC FINISH — heroes only
   Subtle film grain via SVG, slightly stronger vignette.
   ============================================================ */

.pz-hero__bg,
.pz-clean-post__hero__bg,
.pz-page-hero__bg,
body.pz-clean-post .pz-clean-post__hero {
  position: relative;
}

.pz-hero__bg::after,
.pz-clean-post__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='1'/></svg>");
  background-size: 220px 220px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: overlay;
}


/* ============================================================
   LOADING / SKELETON state — calm shimmer on lazy images
   ============================================================ */

img[loading="lazy"]:not(.pz-loaded):not([src=""]):not([src*="data:"]) {
  background:
    linear-gradient(90deg,
      var(--pz-paper-2, #f5f5f4) 0%,
      rgba(28, 25, 23, 0.04) 50%,
      var(--pz-paper-2, #f5f5f4) 100%) !important;
  background-size: 200% 100% !important;
  animation: pz-shimmer 1.8s var(--pz-ease-std, cubic-bezier(0.4, 0, 0.2, 1)) infinite;
}

@keyframes pz-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

img.pz-loaded,
img[loading="lazy"].pz-loaded {
  animation: none !important;
  background: transparent !important;
}


/* ============================================================
   REDUCED MOTION respect
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  img[loading="lazy"]:not(.pz-loaded) {
    animation: none !important;
  }
  .pz-hero__bg::after,
  .pz-clean-post__hero::after {
    display: none;
  }
}