/* /testimony/ — the reel feed.

   Each entry is one post: a rail on the left that stays put while you read, and a body
   holding the caption, the recording, and the comments. The comments scroll inside their
   own box so the recording does not slide away the moment you start reading them — the
   whole entry sits in about one screen, and you move between posts, not through them.

   Almost everything else is restraint. The page is three thousand people's words and the
   design's job is to stay out of the way. */

/* The front of this page is a headline and a promise and nothing else, so it does not need
   a full section's air beneath it before the first post. The feed's own top padding is
   plenty. */
.tt-top { padding-bottom: 0; }
.tt-mark, .tt-msg .tt-mark {
  font-size: 0.86em; letter-spacing: 0.02em; opacity: 0.62;
  border-bottom: 1px dotted var(--rule); white-space: nowrap;
}

.tt-feed .wrap { max-width: 70rem; }
.tt-reel {
  display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.4rem;
  border-top: 2px solid var(--ink);
  padding-top: 1.5rem;
  margin-top: 3.6rem;
}
.tt-reel:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- the rail */
.tt-rail-in { position: sticky; top: 5.5rem; }
.tt-tags { margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tt-tag {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 0.1rem 0.38rem; opacity: 0.8;
}
.tt-title {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.22; margin: 0 0 0.6rem;
  letter-spacing: -0.015em;
}
.tt-rail p { margin: 0 0 0.3rem; font-size: 0.78rem; }
.tt-date { letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.68; }
.tt-n { font-weight: 700; opacity: 0.8; }
.tt-watch { margin-top: 0.7rem !important; }

/* ---------------------------------------------------------------- the caption */
.tt-post { margin: 0 0 1rem; }
.tt-post p { margin: 0 0 0.6rem; }
.tt-post p:last-child { margin-bottom: 0; }
.tt-post > summary {
  list-style: none; cursor: pointer; position: relative;
}
.tt-post > summary::-webkit-details-marker { display: none; }
/* Closed, the caption is two or three lines with the rest faded out under them. */
/* Clamped to two whole lines with an ellipsis — a clean cut, because "See more" already
   says there is more and a half-faded line just looks like a rendering fault. */
.tt-post > summary .txt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; max-height: 3.2em;
}
.tt-post[open] > summary .txt {
  display: block; -webkit-line-clamp: unset; overflow: visible; max-height: none;
}
.tt-see {
  display: inline-block; margin-top: 0.35rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 2px solid var(--lamp);
}
.tt-see::after { content: "See more"; }
.tt-post[open] .tt-see::after { content: "See less"; }
.tt-post > summary:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; }
/* when JS narrows the click target, only the control looks pressable */
.tt-post.js-fold > summary { cursor: default; }
.tt-post.js-fold .tt-see { cursor: pointer; }

/* ---------------------------------------------------------------- the recording */
/* A reel is whatever shape it was filmed in. 43 of these are 9:16, 34 are 16:9 and the rest
   are neither, so the shape comes from the reel's own poster (--ar, set per entry) rather
   than from one guess applied to everything. The video takes the column's full width until
   that would make it taller than --maxh, at which point height wins — so a portrait reel
   stands tall in the middle of the stage and a landscape one spans the column. */
.tt-stage {
  --maxh: min(52vh, 32rem);
  position: relative; overflow: hidden;
  background: #0c0c0c center / cover no-repeat;
  border: 1px solid var(--rule);
  display: flex; justify-content: center;
}
/* the backdrop is the reel's own still, pushed out of focus and down in light, so the
   ground around a portrait video belongs to the recording rather than being a black bar */
.tt-stage::before {
  content: ""; position: absolute; inset: -3rem;
  background: inherit; filter: blur(28px) brightness(0.42) saturate(0.7);
}
.tt-frame {
  position: relative; z-index: 1; display: block; overflow: hidden;
  aspect-ratio: var(--ar, 0.5625);
  width: min(100%, calc(var(--maxh) * var(--ar, 0.5625)));
  text-decoration: none; background: #0c0c0c;
}
.tt-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-frame:hover img, .tt-frame:focus-visible img { opacity: 0.82; }
.tt-frame:focus-visible { outline: 3px solid var(--lamp); outline-offset: -3px; }
.tt-play {
  position: absolute; inset: 0; margin: auto; width: 3.4rem; height: 3.4rem;
  border-radius: 50%; background: rgba(16, 16, 16, 0.62);
  border: 2px solid var(--paper); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.tt-play::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-left: 0.95rem solid var(--paper);
  border-top: 0.6rem solid transparent; border-bottom: 0.6rem solid transparent;
  transform: translateX(0.14rem);
}
.tt-frame:hover .tt-play { background: var(--ink); }
.tt-dur {
  position: absolute; right: 0.4rem; bottom: 0.4rem;
  background: rgba(16, 16, 16, 0.78); color: var(--paper);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.1rem 0.36rem; border-radius: 2px;
}
/* Playing changes nothing about the box. It used to go full-column width while keeping the
   portrait height, which handed Facebook's player a landscape slot for a portrait video and
   cropped the middle out of it. */
.tt-frame.is-playing iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------------- the comments */
.tt-scroll {
  max-height: min(46vh, 30rem); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--rule); border-top: 0;
  padding: 1.1rem 1.2rem 1.4rem;
  background: linear-gradient(var(--paper) 30%, rgba(244, 241, 234, 0)) top / 100% 2rem no-repeat,
              linear-gradient(rgba(244, 241, 234, 0), var(--paper) 70%) bottom / 100% 2.2rem no-repeat;
  background-attachment: local, local;
}
.tt-scroll:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }
.tt-none { margin: 0; font-size: 0.85rem; opacity: 0.6; }

.tt-c { margin: 0 0 1.05rem; }
.tt-c-head { display: flex; align-items: baseline; gap: 0.55rem; margin-bottom: 0.12rem; }
.tt-who {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 0.08rem 0.4rem; white-space: nowrap;
}
/* the question mark is the honesty: a label here was guessed, never stated */
.tt-who abbr {
  border: 0; text-decoration: none; cursor: help; margin-left: 0.22rem;
  opacity: 0.6; font-weight: 800;
}
.tt-when { font-size: 0.72rem; opacity: 0.55; letter-spacing: 0.02em; }
.tt-msg { font-size: 0.94rem; overflow-wrap: anywhere; }
.tt-msg p { margin: 0 0 0.35rem; }
.tt-msg p:last-child { margin-bottom: 0; }

.tt-replies { margin-left: 0.9rem; padding-left: 0.9rem; border-left: 2px solid var(--rule); }

/* ---------------------------------------------------------------- narrow screens */
/* No nested scrolling on a phone: a box that traps the scroll is worse than a long page.
   The rail becomes a heading, the recording sits under it, and everything flows. */
@media (max-width: 60rem) {
  .tt-reel { grid-template-columns: 1fr; gap: 1.1rem; }
  .tt-rail-in { position: static; }
  .tt-title { font-size: 1.15rem; }
  .tt-stage { --maxh: min(62vh, 30rem); }
  .tt-scroll {
    max-height: none; overflow: visible; border: 0; border-top: 1px solid var(--rule);
    padding: 1.2rem 0 0; background: none;
  }
}