/* Shared Cover links presentation for public pages and editor previews. */
.cover-flow {
  --cover-size: clamp(13rem, 26vw, 20rem);
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  border-block: 1px solid rgba(238,234,225,.18); background: #09090c;
  color: var(--ink, var(--account-ink, #eeeae1)); touch-action: pan-y;
  container-type: inline-size;
}
.cover-flow[hidden], .cover-flow [hidden] { display: none !important; }
.cover-flow-stage { position: relative; height: clamp(25rem, 45vw, 33rem); perspective: 1200px; perspective-origin: 50% 44%; transform-style: flat; z-index: 1; touch-action: pan-y; }
.cover-flow-stage::before { content: ''; position: absolute; width: 60%; height: 12%; left: 20%; top: 73%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.7), transparent 70%); pointer-events: none; }
.cover-flow-card { position: absolute; top: 44%; left: 50%; display: block; width: var(--cover-size); aspect-ratio: 1; color: inherit; background: #101014; border: 1px solid rgba(238,234,225,.2); transform: translate(-50%,-50%); box-shadow: 0 1.2rem 2.8rem #0008; text-decoration: none; user-select: none; -webkit-user-drag: none; }
.cover-links-enhanced .cover-flow-card { overflow: visible; transition: none; -webkit-box-reflect: unset; filter: none; cursor: pointer; }
.cover-link-surface { --tilt-x: 0deg; --tilt-y: 0deg; --lift: 0px; position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #101014; transform: translateY(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform 180ms ease-out, box-shadow 220ms ease-out; }
.cover-flow-card:focus-visible .cover-link-surface { box-shadow: 0 0 0 1px #fff5df99, 0 0 24px #f5dfaa40, 0 0 50px #f5dfaa18; }
@media (hover: hover) and (pointer: fine) {
 .cover-links-enhanced:not(.is-dragging) .cover-flow-card:hover .cover-link-surface { box-shadow: 0 0 0 1px #fff5df99, 0 0 24px #f5dfaa40, 0 0 50px #f5dfaa18; }
}
.cover-link-surface::after, .cover-flow-card:not(:has(.cover-link-surface))::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#0002, transparent 32%,#000b); pointer-events: none; }
.cover-links-enhanced .cover-flow-card::after { display: none; }
.cover-links-enhanced .cover-flow-card.is-active { border-color: #eeeae17a; box-shadow: 0 1.4rem 3rem #0009, 0 0 0 1px #eeeae10d; }
.cover-flow-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-flow-platform, .cover-flow-copy { position: absolute; z-index: 1; left: 1rem; right: 1rem; }
.cover-flow-platform { top: 1rem; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.cover-flow-copy { bottom: 1rem; display: grid; gap: .35rem; }
.cover-flow-copy strong { font-size: clamp(1.1rem, 2.1vw, 1.6rem); line-height: 1.2; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover-flow-copy small { font-family: "D-DIN Expanded", sans-serif; font-size: .7rem; line-height: 1.4; font-weight: 400; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover-links-ambience { position: absolute; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; opacity: .18; }
.cover-links-ambience img { position: absolute; width: 100%; height: 100%; object-fit: cover; filter: blur(38px) saturate(.65); transform: scale(1.15); opacity: 0; transition: opacity 450ms ease; }
.cover-links-ambience img.is-visible { opacity: 1; }
.cover-links-ambience::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#09090c66,#09090cdd); }
.cover-flow-controls { position: relative; z-index: 2; display: grid; grid-template-columns: 3rem minmax(0,1fr) 3rem; align-items: center; gap: 1rem; padding: 1rem 1.5rem 1.5rem; }
.cover-flow.is-single .cover-flow-controls { grid-template-columns: minmax(0,1fr); }
.cover-flow-meta { min-width: 0; text-align: center; }
.cover-flow-meta p { margin: 0 0 .6rem; font-size: .72rem; letter-spacing: .15em; opacity: .65; }
.cover-flow-meta h3 { margin: 0; font-size: clamp(1rem,2vw,1.6rem); line-height: 1.4; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
.cover-flow-meta a, .cover-flow-meta > span { display: inline-flex; align-items: center; min-height: 44px; margin-top: .6rem; color: inherit; font-size: .78rem; letter-spacing: .06em; }
.cover-flow-arrow { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: #09090c88; color: inherit; border: 1px solid #eeeae140; border-radius: 50%; cursor: pointer; font: inherit; font-size: 1.4rem; transition: background 180ms, border-color 180ms; }
.cover-flow-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.cover-flow-arrow:hover { background: #eeeae115; border-color: #eeeae180; }
.cover-flow :focus-visible, .cover-flow:focus-visible { outline: 2px solid #eeeae1; outline-offset: 5px; }
.cover-links-hint { position: relative; z-index: 1; text-align: center; margin: 0; padding: 0 1rem 1.25rem; font-size: .75rem; opacity: .65; }
.cover-links-motion { position: relative; z-index: 1; display: block; margin: -.6rem auto .75rem; padding: .65rem 1rem; border: 0; background: transparent; color: inherit; font: inherit; font-size: .7rem; text-decoration: underline; text-underline-offset: .25em; opacity: .65; cursor: pointer; }
.cover-links-motion:hover { opacity: 1; }
.cover-links-enhanced.is-dragging, .cover-links-enhanced.is-dragging .cover-flow-card { cursor: grabbing; }
.cover-links-enhanced .cover-flow-stage { cursor: grab; }
.cover-links-enhanced.is-dragging .cover-flow-stage { cursor: grabbing; }
.cover-links-enhanced.is-dragging .cover-link-surface { transition: none; }
.cover-flow-coming { display: grid; place-items: center; background: radial-gradient(circle, #27232a, #101014); }
.cover-flow-coming-mark { font-size: 4rem; opacity: .2; }
.cover-links-preview { --cover-size: 14rem; }
.cover-links-preview .cover-flow-stage { height: 25rem; }
.cover-links-preview .cover-flow-meta h3 { font-size: 1rem; }
@container (max-width: 520px) {
 .cover-flow-stage { height: 23rem; }
 .cover-flow-card { width: min(13rem, 62cqi); }
 .cover-flow-controls { padding-inline: .6rem; gap: .5rem; grid-template-columns: 44px minmax(0,1fr) 44px; }
 .cover-flow-copy strong { font-size: 1.15rem; }
 .cover-flow-meta h3 { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
 .cover-link-surface, .cover-links-ambience img, .cover-flow-card { transition: none !important; }
 .cover-link-surface { transform: none; }
 .cover-links-ambience { display: none; }
}