/* ============================================================
   CROSS-LINK PREVIEW (js/link-preview.js)
   A card under a link to another page of the site: the kind of page, the
   hero picture, the title and standfirst, and a note that it
   opens in a new tab. Desktop pointers only.
   ============================================================ */

.xl-end{white-space:nowrap;}
.xl-mark{
  content:"";display:inline-block;width:.62em;height:.62em;margin-left:.2em;vertical-align:.18em;
  background:currentColor;opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 7.5 7.5 2.5M3.5 2.5h4v4' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 7.5 7.5 2.5M3.5 2.5h4v4' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity var(--hover-t,.1s) ease,transform .2s ease;
}
@media (hover:hover){a[data-preview]:hover .xl-mark{opacity:1;transform:translate(1px,-1px);}}

.link-preview{
  position:fixed;left:0;top:0;z-index:70;
  width:320px;overflow:hidden;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--rule);border-radius:14px;
  box-shadow:0 18px 40px -12px rgba(24,24,27,.22),0 2px 8px rgba(24,24,27,.06);
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .16s ease,visibility 0s linear .16s;
}
:root[data-theme="dark"] .link-preview{background:var(--sink);border-color:var(--rule-2);box-shadow:0 18px 40px -12px rgba(0,0,0,.7);}
.link-preview.is-on{opacity:1;visibility:visible;transition:opacity .18s ease,visibility 0s;}
/* the contents rise into place from the link's side */
.link-preview > *{transform:translateY(-6px);transition:transform .3s cubic-bezier(.2,.8,.3,1);}
.link-preview.is-above > *{transform:translateY(6px);}
.link-preview.is-on > *{transform:none;}

.lp-shot{display:none;aspect-ratio:16/9;background:var(--sink);border-bottom:1px solid var(--rule);}
.link-preview.has-shot .lp-shot{display:block;}
.lp-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}

.lp-body{padding:14px 16px 12px;}
.lp-body p{margin:0;}
.lp-kind{display:flex;flex-wrap:wrap;gap:0 8px;font:500 11px/1.4 var(--mono);letter-spacing:.02em;color:var(--ink-2);text-transform:uppercase;}
.lp-kind-name{color:var(--accent-text);}
.lp-title{margin-top:6px !important;font-family:var(--body);font-weight:600;font-size:15px;line-height:1.3;letter-spacing:-0.01em;color:var(--ink);text-wrap:balance;}
.lp-lede{margin-top:6px !important;font-family:var(--body);font-size:13px;line-height:1.45;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.lp-lede:empty{display:none;}
.lp-foot{display:flex;align-items:center;gap:6px;margin-top:12px !important;padding-top:10px;border-top:1px solid var(--rule);
  font-family:var(--body);font-size:12px;color:var(--ink-3);}
.lp-foot svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

/* before the page has answered: the title from the link, and a shimmer */
.link-preview.is-loading .lp-title{color:var(--ink-2);}
.link-preview.is-loading .lp-lede{display:block;height:2.9em;border-radius:4px;
  background:linear-gradient(90deg,var(--sink) 0%,var(--rule) 50%,var(--sink) 100%) 0 0/200% 100%;animation:lp-shimmer 1.2s linear infinite;}
@keyframes lp-shimmer{to{background-position:-200% 0;}}

@media (prefers-reduced-motion:reduce){
  .link-preview > *,.link-preview.is-above > *{transform:none;transition:none;}
  .link-preview.is-loading .lp-lede{animation:none;}
  .xl-mark{transition:none;}
}