.site-mock {
  --sm-bg: #0B0B0A;
  --sm-bronze: #C9A56B;     
  --sm-ink: #F4EFE6;
  --sm-ink-2: rgba(244, 239, 230, .78);
  --sm-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", "Songti SC", serif;
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10.4;
  background: var(--sm-bg);
  color: var(--sm-ink);
  font-family: "Jost", "Sora", "Sora Fallback", system-ui, sans-serif;
  text-align: left;
}
.site-mock-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-mock::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 11, 10, .78) 0%, rgba(11, 11, 10, .42) 48%, rgba(11, 11, 10, 0) 78%),
    linear-gradient(to top, rgba(11, 11, 10, .92) 0%, rgba(11, 11, 10, .5) 40%, rgba(11, 11, 10, .12) 70%, rgba(11, 11, 10, .6) 100%);
}
.site-mock-nav, .site-mock-copy, .site-mock-note { position: absolute; z-index: 1; }
.site-mock-nav { top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 16px; padding: 14px 22px; }

.site-mock-logo { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; color: var(--sm-ink); font-size: 14px; }
.site-mock-logo svg { display: block; width: 1.3em; height: 1.3em; color: var(--sm-bronze); }
.site-mock-logo i { display: block; width: 4.2em; height: 2px; border-radius: 1px; background: var(--sm-ink); opacity: .85; }
.site-mock-links { color: var(--sm-ink-2); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.site-mock-copy { left: 22px; bottom: 34px; display: grid; gap: 8px; max-width: 50%; }
.site-mock-eyebrow { color: var(--sm-bronze); font-size: 9.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.site-mock-h { color: var(--sm-ink); font-family: var(--sm-serif); font-size: clamp(18px, 1.6vw, 23px); font-weight: 500; line-height: 1.12; letter-spacing: 0; }
.site-mock-h em { color: var(--sm-bronze); font-style: italic; }
.site-mock-p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  color: var(--sm-ink-2);
  font-size: 10.5px;
  line-height: 1.5;
}
.site-mock-note { left: 50%; bottom: 10px; translate: -50% 0; padding: 2px 9px; border-radius: 999px; background: rgba(11, 11, 10, .6); color: var(--sm-ink-2); font-size: 9.5px; letter-spacing: .04em; white-space: nowrap; }



.hv-live .hv-bar { background: #161614; border-bottom-color: rgba(255, 255, 255, .08); }
.hv-live .hv-bar > i { background: rgba(255, 255, 255, .16); }
.hv-live .hv-bar > i:first-child { background: var(--orange); }
.hv-live .hv-url { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); }

@media (max-width: 760px) {
  .hv-live .site-mock { aspect-ratio: 4 / 3.3; }
  .site-mock-nav { gap: 10px; padding: 11px 14px; }
  .site-mock-logo { font-size: 12px; }
  .site-mock-links { font-size: 8px; letter-spacing: .08em; }
  .site-mock-copy { left: 14px; right: 14px; bottom: 36px; max-width: none; gap: 6px; }
  .site-mock-h { font-size: 19px; }
  .site-mock-p { font-size: 10.5px; -webkit-line-clamp: 2; }
}
@media (max-width: 420px) { .site-mock-links { display: none; } }