/* ============================================================================
   TESTIMONIALS: what they said in bold display type under a big quote mark, and beneath it a byline:
   the person in a small rounded monitor window beside their two-tier lower-third name super.
   Markup is stamped by scripts/testimonials.py, so only cleared quotes (and their photos) ever reach
   a page. No photo, or anonymous: NO SIGNAL.
     no JS          the quotes simply stack
     one quote      just the quote, no controls
     two or three   one at a time; advances on its own with Pause, Prev / Next
   Every quote builds in with the site's kana-resolve text animation; a change of quote is a channel
   change on the picture (static, then the new face arriving with the signal split). Calm modes
   (reduced motion, .a11y): plain text, instant swap, no advancing.
   ============================================================================ */
.tm{max-width:var(--maxread); margin:var(--s5) 0; padding:32px 34px; --tm-c:var(--chan, var(--orange));   /* a free-floating card, even space inside and out */
  background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(217,211,153,.05)}
.tm-slide{display:grid; grid-template-columns:72px minmax(0,1fr); grid-template-areas:"q q" "feed by"; column-gap:16px; row-gap:22px;
  align-content:start; margin:0}                                   /* quotes sit at the top of the card; a shorter one leaves its spare room above the controls */
.tm-slide + .tm-slide{margin-top:var(--s5)}                        /* the no-JS stack */

/* ---- what they said: bold display type on the dark, a big channel-colour quote mark over it ---- */
.tm-q{grid-area:q; position:relative; margin:0; padding-top:46px}
.tm-q::before{content:"\201C"; position:absolute; left:-5px; top:-16px; font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 125;
  font-size:100px; line-height:1; color:var(--tm-c); text-shadow:0 0 30px color-mix(in srgb, var(--tm-c) 45%, transparent); pointer-events:none}
.tm-q p{font-family:var(--disp); font-weight:800; font-variation-settings:"wght" 800,"wdth" 106; font-size:1.5rem; line-height:1.2; letter-spacing:-.01em;
  color:var(--cream); text-wrap:pretty; text-shadow:0 0 26px color-mix(in srgb, var(--tm-c) 22%, transparent)}
.tm-slide[data-len="s"] .tm-q p{font-size:clamp(1.6rem, 3vw, 2.05rem); line-height:1.12}    /* short ones say it bigger */
.tm-slide[data-len="l"] .tm-q p{font-size:1.22rem; line-height:1.32; font-weight:700; font-variation-settings:"wght" 700,"wdth" 104}

/* ---- the byline, part 1: the subject in a small rounded monitor window, scanlines on the glass, the signal split at its edges ---- */
.tm-feed{grid-area:feed; align-self:center; position:relative;
  filter:drop-shadow(2px 0 0 color-mix(in srgb, var(--cyan) 55%, transparent)) drop-shadow(-2px 0 0 color-mix(in srgb, var(--magenta) 55%, transparent))}
.tm-feed.is-tuning{animation:tmSplit .7s cubic-bezier(.2,.6,.2,1) both}
@keyframes tmSplit{
  0%{filter:drop-shadow(8px 0 0 color-mix(in srgb, var(--cyan) 85%, transparent)) drop-shadow(-8px 0 0 color-mix(in srgb, var(--magenta) 85%, transparent))}
  100%{filter:drop-shadow(2px 0 0 color-mix(in srgb, var(--cyan) 55%, transparent)) drop-shadow(-2px 0 0 color-mix(in srgb, var(--magenta) 55%, transparent))}
}
.tm-screen{position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#0a0f0a; box-shadow:0 0 0 1px var(--line), 0 8px 18px rgba(0,0,0,.4)}
.tm-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.06)}
.tm-screen::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;    /* scanlines and the curve of the glass */
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.2) 2px 3px);
  box-shadow:inset 0 0 14px rgba(0,0,0,.5)}
.tm-ch{display:none}                                                 /* too small a window for a channel number over the face */
.tm-nosig{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; z-index:1;
  font-family:"VT323", var(--mono); font-size:13px; line-height:1.05; color:#f4f1dc;
  background:#555 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") center / 120px}
.tm-nosig span{background:#000; padding:2px 4px}

/* ---- the byline, part 2: the name super, two tiers, the name on a channel-colour bar and the title on black beneath it ---- */
.tm-by{grid-area:by; align-self:center; display:flex; flex-direction:column; align-items:flex-start; min-width:0}
.tm-name{background:var(--tm-c); color:var(--black); font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 115;
  text-transform:uppercase; font-size:1rem; line-height:1.05; letter-spacing:.01em; padding:7px 12px 6px}
.tm-role{background:rgba(0,0,0,.78); color:var(--cream); font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  line-height:1.5; padding:6px 12px 7px; max-width:100%}

/* ---------- carousel mode, switched on by assets/testimonials.js when there are two or more ---------- */
.tm--live{display:grid; touch-action:pan-y}                         /* horizontal swipes are ours, vertical scroll stays the page's */
.tm--live .tm-slide{grid-area:1/1; margin:0}                        /* stacked in one cell: the frame is always the tallest quote, so nothing jumps */
.tm--live .tm-slide:not(.is-on){visibility:hidden}
.tm-bar{grid-area:2/1; position:relative; display:flex; align-items:center; gap:8px; margin-top:30px}
.tm-prog{position:absolute; left:0; right:0; top:-12px; height:2px; background:var(--tm-c); opacity:.75; transform:scaleX(0); transform-origin:0 50%; pointer-events:none}   /* time until the next channel */
.tm-count{margin-right:auto; margin-left:4px; font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.14em; color:var(--dim); font-variant-numeric:tabular-nums}
.tm-btn{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream);
  background:rgba(0,0,0,.35); border:1.5px solid var(--line); border-radius:4px; padding:8px 12px; cursor:pointer}
.tm-btn:hover, .tm-btn:focus-visible{border-color:var(--cream)}
/* the channel change: the site's TV static fills the picture (assets/testimonials.js drives it), then the new face */
.tm-static{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:3; opacity:0; pointer-events:none}

@media(max-width:560px){ .tm{padding:24px 20px} .tm-slide{grid-template-columns:60px minmax(0,1fr); column-gap:14px} }
:root.a11y .tm-static{display:none}
:root.a11y .tm{background:#0b100b; box-shadow:none}
:root.a11y .tm-feed{filter:none}
:root.a11y .tm-screen::after{background:none}