/*! Video Gallery 1.0 | vg.css
   Proportions: golden ratio (phi = 1.618). Spacing .382 / .618 / 1 / 1.618 / 2.618 / 4.236 rem,
   stage split 61.8% / 38.2%, row thumbnail 38.2%, play-icon triangle sized by phi^-3 and phi^-4.
   Colour: da Vinci's palette. Parchment and umber ink carry the page (chiaroscuro), sanguine red
   chalk is the single call to action, its complement verdigris labels information, ochre ornaments. */

.vg {
  --vg-bg: light-dark(#f4ede1, #17130f);      /* parchment / umber night   */
  --vg-ink: light-dark(#2b2420, #efe6d6);     /* iron-gall ink / lamplight */
  --vg-mute: light-dark(#6b5e52, #b0a290);    /* sfumato midtone           */
  --vg-red: light-dark(#a5462f, #d67a5c);     /* sanguine: action          */
  --vg-green: light-dark(#4a6b63, #8fb3a9);   /* verdigris: information    */
  --vg-gold: light-dark(#946f3a, #c9a266);    /* ochre: ornament           */
  --vg-line: light-dark(rgba(43, 36, 32, .14), rgba(239, 230, 214, .12));
  --vg-shade: 22, 18, 15;
  --vg-serif: "Cormorant Garamond", "EB Garamond", Garamond, "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --vg-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vg-s1: .382rem; --vg-s2: .618rem; --vg-s3: 1rem; --vg-s4: 1.618rem; --vg-s5: 2.618rem; --vg-s6: 4.236rem;
  --vg-r: .618rem;

  color-scheme: light;
  container-type: inline-size;
  box-sizing: border-box;
  max-width: 100%;
  margin: var(--vg-s5) 0;
  padding: clamp(var(--vg-s4), 5vw, var(--vg-s6)) clamp(var(--vg-s3), 4vw, var(--vg-s5));
  border-radius: var(--vg-r);
  background: var(--vg-bg);
  color: var(--vg-ink);
  font: 400 1rem/1.618 var(--vg-sans);
  text-align: left;
}
.vg[data-theme=dark] { color-scheme: dark; }
.vg[data-theme=auto] { color-scheme: light dark; }
.vg *, .vg *::before, .vg *::after { box-sizing: inherit; }
.vg :is(h2, h3, p) { margin: 0; padding: 0; border: 0; background: none; color: inherit; text-transform: none; letter-spacing: normal; }
.vg :is(h2, h3, p)::before, .vg :is(h2, h3)::after { content: none; }

/* Header */
.vg .vg-head { display: grid; gap: var(--vg-s2); max-width: 38em; margin-bottom: var(--vg-s5); }
.vg .vg-eyebrow, .vg .vg-kicker, .vg .vg-label, .vg .vg-sub {
  display: flex; align-items: center; gap: var(--vg-s2);
  font: 600 .72rem/1.2 var(--vg-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--vg-green);
}
.vg .vg-mark { flex: none; width: 1.618rem; height: 1.618rem; color: var(--vg-gold); }
.vg .vg-h { font: 500 clamp(1.618rem, 1.1rem + 2.4cqi, 2.618rem)/1.1 var(--vg-serif); letter-spacing: -.01em; color: var(--vg-ink); }
.vg .vg-intro { max-width: 34em; color: var(--vg-mute); }

/* Stage: 61.8 / 38.2 */
.vg .vg-stage { display: grid; gap: var(--vg-s4); scroll-margin-top: 6rem; }
@container (min-width: 46rem) {
  .vg .vg-stage { grid-template-columns: 1.618fr 1fr; align-items: center; gap: var(--vg-s5); }
}
.vg .vg-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--vg-r); background: #0e0b09;
  box-shadow: 0 var(--vg-s4) var(--vg-s5) calc(var(--vg-s4) * -1) rgba(var(--vg-shade), .6);
}
.vg .vg-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vg .vg-text { display: grid; gap: var(--vg-s3); align-content: center; }
.vg .vg-text::before { content: ""; width: var(--vg-s5); height: 1px; background: var(--vg-gold); }
.vg .vg-media, .vg .vg-text { animation: vg-in .9s cubic-bezier(.2, .7, .2, 1) both; }
.vg .vg-text { animation-delay: .12s; }
.vg .vg-num { font: italic 500 1.272rem/1 var(--vg-serif); letter-spacing: 0; text-transform: none; color: var(--vg-gold); }
.vg .vg-stage .vg-title { font: 500 clamp(1.618rem, 1.2rem + 1.4cqi, 2.058rem)/1.15 var(--vg-serif); color: var(--vg-ink); }
.vg .vg-label { margin-bottom: calc(var(--vg-s2) * -1); }
.vg .vg-why { color: var(--vg-mute); }
.vg .vg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vg-s4); font: 500 .8125rem/1.4 var(--vg-sans); color: var(--vg-mute); font-variant-numeric: tabular-nums; }
.vg .vg-yt, .vg .vg-yt:visited { color: var(--vg-red); text-decoration: underline 1px; text-underline-offset: .35em; border: 0; box-shadow: none; }
.vg .vg-yt:hover { color: var(--vg-ink); }

/* Thumbnail: sfumato veil that clears on hover */
.vg .vg-thumb {
  all: unset; position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: inherit; background: #1b1612; cursor: pointer;
}
.vg .vg-thumb img {
  display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0;
  filter: sepia(.2) saturate(.85); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter 1.2s;
}
.vg .vg-thumb::after {
  content: ""; position: absolute; inset: 0; transition: opacity 1.2s;
  background: radial-gradient(120% 95% at 50% 45%, transparent 42%, rgba(var(--vg-shade), .62));
}
.vg .vg-play {
  --p: 4.236rem;
  position: absolute; z-index: 1; left: 50%; top: 50%; width: var(--p); height: var(--p);
  margin: calc(var(--p) / -2) 0 0 calc(var(--p) / -2); border-radius: 50%; background: var(--vg-red);
  box-shadow: 0 0 0 calc(var(--p) * .09) rgba(244, 237, 225, .2), 0 var(--vg-s2) var(--vg-s4) rgba(var(--vg-shade), .45);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s;
}
.vg .vg-play::before {
  content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%;
  border-style: solid; border-color: transparent transparent transparent #f7f1e6;
  border-width: calc(var(--p) * .146) 0 calc(var(--p) * .146) calc(var(--p) * .236);
}
.vg .vg-time {
  position: absolute; z-index: 1; right: var(--vg-s2); bottom: var(--vg-s2); padding: .25rem .5rem; border-radius: .25rem;
  background: rgba(var(--vg-shade), .78); color: #f4ede1; font: 600 .72rem/1 var(--vg-sans); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.vg .vg-thumb:hover img, .vg .vg-item:hover img { transform: scale(1.045); filter: none; }
.vg .vg-thumb:hover::after, .vg .vg-item:hover .vg-thumb::after { opacity: .3; }
.vg .vg-thumb:hover .vg-play, .vg .vg-item:hover .vg-play {
  transform: scale(1.09); box-shadow: 0 0 0 calc(var(--p) * .146) rgba(244, 237, 225, .26), 0 var(--vg-s2) var(--vg-s4) rgba(var(--vg-shade), .5);
}

/* List: 38.2 / 61.8 rows */
.vg .vg-sub { margin: var(--vg-s6) 0 var(--vg-s2); color: var(--vg-mute); }
.vg .vg-list { display: grid; column-gap: var(--vg-s5); }
@container (min-width: 56rem) { .vg .vg-list { grid-template-columns: 1fr 1fr; } }
.vg .vg-item {
  display: grid; grid-template-columns: 38.2% 1fr; gap: var(--vg-s4); align-items: center;
  padding: var(--vg-s4) 0; border-top: 1px solid var(--vg-line); cursor: pointer;
}
.vg .vg-item .vg-thumb { border-radius: calc(var(--vg-r) * .618); }
.vg .vg-item .vg-play { --p: 2.618rem; }
.vg .vg-item .vg-time { right: var(--vg-s1); bottom: var(--vg-s1); }
.vg .vg-body { display: grid; gap: var(--vg-s1); }
.vg .vg-item .vg-title { font: 500 1.272rem/1.2 var(--vg-serif); color: var(--vg-ink); }
.vg .vg-go { all: unset; cursor: pointer; transition: color .4s; }
.vg .vg-item:hover .vg-go { color: var(--vg-red); }
.vg .vg-item .vg-why { font-size: .9375rem; line-height: 1.55; }
@container (max-width: 30rem) {
  .vg .vg-item { grid-template-columns: 1fr; gap: var(--vg-s3); }
}

.vg :focus-visible { outline: 2px solid var(--vg-green); outline-offset: 3px; }
.vg .vg-thumb:focus-visible { outline: 2px solid #f7f1e6; outline-offset: -6px; }
@keyframes vg-in { from { opacity: 0; transform: translateY(var(--vg-s1)); } }
@media (prefers-reduced-motion: reduce) { .vg *, .vg *::before, .vg *::after { animation: none !important; transition: none !important; } }