/* ============================================================
   SOCIALS REEL
   ============================================================
   Companion sheet to js/socials-carousel.js. Linked, not rebuilt
   on system.css — same standing as the loader and the hero
   aperture: a WebGL lens, a canvas stack and the overlay type
   that sits on top of them are component mechanics, not tokens
   the rest of the page could share. Shared colour, type and
   space come through as var(--kdb-*) with literal fallbacks.

   Selector names are this component's. Checked against
   system.css: no .k-reel* there.
   ============================================================ */

.k-reel {
  position: relative;
  /* The wrap has to reach the viewport edges or the cylinder
     has nothing to bend at the sides. Same full-bleed trick as
     the diptych; the page's one-bleed rule is already spent on
     the hero, but a mid-page cylinder that stops at the 1440
     cap reads as a cropped strip, not a lens. */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  min-height: 100svh;
  background: var(--kdb-reel-ground, #fcfdfe);
  color: var(--kdb-reel-ink, #14181d);
  overflow: hidden;
}

.k-reel .t-caption,
.k-reel .t-micro {
  color: var(--kdb-reel-ink-muted, #6b7480);
}

.k-reel__stage {
  position: relative;
  min-height: 100svh;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.k-reel__stage.is-drag { cursor: grabbing; }
.k-reel__stage.is-over-hit { cursor: pointer; }
.k-reel__stage:focus { outline: none; }
.k-reel__stage:focus-visible {
  outline: var(--kdb-rule-divide, 2px) solid var(--kdb-accent-mark, #3a8dbe);
  outline-offset: calc(-1 * var(--kdb-space-snug, 16px));
}

.k-reel__gl {
  display: block;
  width: 100%;
  height: 100svh;
  vertical-align: top;
}

.k-reel__meta {
  position: absolute;
  top: var(--kdb-nav-height, 4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  padding-block-start: var(--kdb-space-loose, 40px);
  width: min(42rem, calc(100% - 2 * var(--kdb-space-base, 24px)));
  text-align: center;
  pointer-events: none;
}

.k-reel__meta .t-head {
  margin: 0;
}

.k-reel__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kdb-space-snug, 16px) var(--kdb-space-base, 24px);
  margin: var(--kdb-space-snug, 16px) 0 0;
  pointer-events: auto;
}
.k-reel__links a {
  font-size: var(--kdb-size-small, 0.875rem);
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 transparent;
}
.k-reel__links a:hover,
.k-reel__links a:focus-visible {
  box-shadow: inset 0 -1px 0 0 currentColor;
}

.k-reel__copy {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translateX(-50%);
  margin-top: calc(min(23vh, 12.5rem) + var(--kdb-space-snug, 16px));
  width: min(42rem, calc(100% - 2 * var(--kdb-space-base, 24px)));
  text-align: center;
  pointer-events: none;
}

.k-reel__caption {
  margin: 0 auto;
  max-width: none;
  min-height: 1.35em;
}

.k-reel__date {
  margin: var(--kdb-space-hair, 4px) 0 0;
  display: block;
}

.k-reel__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.k-reel__note {
  position: absolute;
  left: 50%;
  bottom: 6rem;
  transform: translateX(-50%);
  z-index: 2;
  max-width: 36rem;
  text-align: center;
}

.k-reel__fallback {
  display: none;
  height: 100svh;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  padding: 0 8vw;
  -webkit-overflow-scrolling: touch;
}
.k-reel__fallback img {
  display: block;
  height: min(52vh, 26rem);
  width: auto;
  flex: 0 0 auto;
}
.k-reel.is-fallback .k-reel__gl { display: none; }
.k-reel.is-fallback .k-reel__fallback { display: flex; }
.k-reel.is-fallback .k-reel__stage { cursor: auto; touch-action: pan-x; }

@media (prefers-reduced-motion: reduce) {
  .k-reel { scroll-margin-block: 0; }
}

@media (max-width: 719px) {
  .k-reel__meta { padding-block-start: var(--kdb-space-base, 24px); }
}

/* The reel is paper. The footer's chapter gap is the rest
   before ink — leave it. */