/*
 * A citation, set like one.
 *
 * The site already has a visual language for a record: a mono label, a rule, a
 * fact under it. An archive item is the same object with a provenance line, so
 * it is drawn the same way rather than as a card with a shadow and a corner
 * radius — this site has neither.
 *
 * The source colour is the one place a third party is allowed to tint anything:
 * a thin bar on the inline edge, so a reader can tell a video from a post
 * before reading a word, without a logo appearing anywhere on the page.
 */

.root {
  display: grid;
  gap: var(--s4);
}

.list {
  display: grid;
  gap: var(--hairline);
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--rule);
  border-block: var(--hairline) solid var(--rule);
}

.item {
  display: grid;
  gap: var(--s2);
  padding: var(--s5) var(--s5) var(--s4);
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--rule-strong);
}

/*
 * YouTube and Facebook are both evidence, but they are different kinds of it —
 * a walkthrough you watch versus a dated post you check. The edge bar is the
 * quietest possible way to say which, and it is the only differentiation: no
 * brand colours, no logos, no platform furniture.
 */
.item[data-source="youtube"] {
  box-shadow: inset 3px 0 0 var(--blue);
}

.item[data-source="facebook"] {
  box-shadow: inset 3px 0 0 var(--green-ink);
}

/* ---- The provenance line ------------------------------------------------ */

.meta {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.source {
  color: var(--ink-2);
}

.dot {
  color: var(--rule-strong);
}

.kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---- What a reader will see --------------------------------------------- */

.lead {
  margin: var(--s2) 0 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  max-width: 54ch;
  text-wrap: pretty;
}

/*
 * The video's own title, verbatim, under the sentence that explains it. It is
 * set quietly and in the original language — often Macedonian on an Albanian
 * page — because it is a quotation from the archive, not interface copy.
 */
.title {
  margin: 0;
  font-size: var(--step-small);
  color: var(--ink-2);
  max-width: 54ch;
}

/* ---- The action --------------------------------------------------------- */

.action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin: var(--s3) 0 0;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  margin-inline-start: calc(var(--s3) * -1);
  padding-inline: var(--s3);
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  text-align: start;
  transition: color var(--t-colour) linear;
}

.cta:hover {
  color: var(--green-ink);
}

.item[data-source="youtube"] .cta:hover {
  color: var(--blue);
}

.arrow {
  font-weight: 400;
  transition: transform var(--t-colour) var(--ease);
  display: inline-block;
}

.cta:hover .arrow {
  transform: translate(2px, -2px);
}

.duration {
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  color: var(--muted);
}

/* ---- The player --------------------------------------------------------- */

.frame {
  margin-top: var(--s4);
  border-top: var(--hairline) solid var(--rule);
  padding-top: var(--s4);
}

.aspect {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.aspect iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.frameFoot {
  display: flex;
  justify-content: flex-end;
  margin: var(--s3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
}

.frameFoot a {
  color: var(--muted);
}

.note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  color: var(--muted);
  max-width: 64ch;
}

/* ---- Wider -------------------------------------------------------------- */

@media (min-width: 1024px) {
  /*
   * Two across when there is more than one. A citation is a short object and
   * a full-width one at 1440 px is a 1,200 px-wide line of 14 px type.
   */
  .list {
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: var(--hairline);
  }

  /*
   * A lone citation does not get the full 1,200 px. Stretched that wide it
   * reads as a banner rather than a record, and its one sentence turns into a
   * single very long line.
   */
  .list:has(> :only-child) {
    max-width: 46rem;
  }
}

/* ---- Motion: opening a record ------------------------------------------- */

/*
 * The archive gesture: provenance, then what it is, then the way in. It is the
 * same three-beat order the band's own entrance uses, continued one level
 * down, and it runs only when the section it belongs to has been armed and
 * scrolled to — so it never plays on a band the reader has already read.
 *
 * Transform and opacity only. The record is laid out at its final size from
 * the first frame; nothing here can move the page.
 */
@media (prefers-reduced-motion: no-preference) {
  [data-enter="out"] .item > [data-enter-part] {
    opacity: 0;
  }

  [data-enter="in"] .item > [data-enter-part] {
    animation: record-in 300ms var(--ease-out) both;
  }

  [data-enter="in"] .item > [data-enter-part="meta"] {
    animation-delay: 40ms;
  }

  [data-enter="in"] .item > [data-enter-part="title"] {
    animation-delay: 110ms;
  }

  [data-enter="in"] .item > [data-enter-part="action"] {
    animation-delay: 180ms;
  }

  @keyframes record-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* ---- On the system's surface -------------------------------------------- */

/*
 * A citation inside a navy chapter: the posts that corroborate a recording,
 * set under it. The same object, painted for the surface it sits on.
 */
[data-surface="ink"] .list {
  background: var(--rule-navy);
  border-color: var(--rule-navy);
}

[data-surface="ink"] .item {
  background: var(--navy-2);
}

[data-surface="ink"] .item[data-source="facebook"] {
  box-shadow: inset 3px 0 0 var(--green);
}

[data-surface="ink"] .item[data-source="youtube"] {
  box-shadow: inset 3px 0 0 var(--blue-2);
}

[data-surface="ink"] .meta,
[data-surface="ink"] .duration,
[data-surface="ink"] .note,
[data-surface="ink"] .frameFoot a {
  color: var(--muted-2);
}

[data-surface="ink"] .source,
[data-surface="ink"] .title {
  color: var(--mat);
}

[data-surface="ink"] .kicker,
[data-surface="ink"] .lead,
[data-surface="ink"] .cta {
  color: #fff;
}

[data-surface="ink"] .cta:hover,
[data-surface="ink"] .item[data-source="youtube"] .cta:hover {
  color: var(--green);
}

[data-surface="ink"] .frame {
  border-top-color: var(--rule-navy);
}

/* ---- A label on navy, for the overview page ---------------------------- */