/* ============================================================
   VERSE TO LIFE  -  a KMMG channel
   Same palette as KMMG, because the Verse to Life colours were
   sampled from the KMMG logo in the first place. The two pages
   separate on typography and ground warmth, not on hue.
   ============================================================ */

:root {
  /* ground: a touch warmer and browner than the KMMG near-black */
  --ink:        #140D07;
  --ink-2:      #1F1409;

  /* text */
  --paper:      #F2E7D5;
  --paper-dim:  rgba(242, 231, 213, .76);
  --muted:      #A39177;
  --line:       rgba(242, 231, 213, .15);

  /* accent */
  --accent:      #D59332;
  --accent-soft: #E8C07A;

  /* surfaces */
  --pill-bg:      rgba(20, 13, 7, .5);
  --scrim-strong: rgba(20, 13, 7, .92);
  --scrim-soft:   rgba(20, 13, 7, .52);

  --hero-fallback: radial-gradient(circle at 50% 34%, #3A2413 0%, #140D07 74%);

  /* type: Fraunces carries the channel, where KMMG uses Cinzel
     and Spectral. Same palette, different voice. */
  --font-display: "Fraunces", Constantia, "Iowan Old Style", Georgia, serif;
  --font-body:    "Source Sans 3", Corbel, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", Consolas, ui-monospace, monospace;

  --display-weight:   300;
  --display-tracking: -.02em;
  --brand-tracking:   -.01em;
}

/* Stills lifted from the reel backgrounds. Vertical plates,
   shown as a row, because that is the shape the channel posts in. */
.stills {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 9vw, 7rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(.75rem, 2vw, 1.5rem);
}

.stills img {
  width: 100%;
  /* height:auto is load-bearing. The height="960" attribute becomes a
     UA presentational hint, and with both width and height set the
     browser ignores aspect-ratio and renders a 960px tall image. */
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 3px;
  filter: saturate(.92);
  transition: filter 500ms var(--ease), transform 500ms var(--ease);
}

.stills img:hover { filter: saturate(1); transform: translateY(-4px); }