.latest { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; row-gap: var(--s-m); }
.latest .photo { grid-column: 1 / 8; aspect-ratio: 16 / 9; position: relative; }
.latest .txt { grid-column: 8 / 13; display: grid; gap: var(--s-s); justify-items: start; }
.date-line { color: var(--gold-small, var(--gold-800)); }
/* the latest message on gold: the most recent thing, the strongest ground */
.latestband .latest .txt h2 .w-light { font-weight: 500; }
.latestband .latest .txt h2 { font-size: var(--t-xxl); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: .95; }
.latestband .latest .muted { color: #FFFFFF; }
.latestband .latest .photo { border-radius: var(--r-panel); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(40, 28, 10, .7); }
.playbig { position: absolute; right: var(--s-s); bottom: var(--s-s); width: clamp(64px, 6vw, 104px); aspect-ratio: 1; border-radius: var(--r-card); display: grid; place-items: center; background: rgba(17, 20, 24, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--white); border: 1px solid rgba(255, 255, 255, .3); transition: background var(--d-move), transform 500ms var(--ease); }
.playbig svg { width: 36%; height: 36%; }
a:hover .playbig { background: var(--gold-500); color: var(--ink); transform: scale(1.06); }
.series-band .hslider { --hs-col: minmax(240px, calc((100% - 3 * var(--gap)) / 4)); }
/* 18 Oct round 2: series as photographs with their names over them; the picture leans in on hover */
.series-band .hslider { --hs-col: minmax(260px, calc((100% - 3 * var(--gap)) / 4)); }
.sercard { position: relative; display: block; border-radius: var(--r-panel); overflow: hidden; isolation: isolate; color: var(--white); }
.sercard .photo { aspect-ratio: 4 / 5; margin: 0; }
.sercard .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.sercard::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14, 16, 19, 0) 38%, rgba(14, 16, 19, .55) 62%, rgba(14, 16, 19, .92)); }
.sercard .cap { position: absolute; inset: auto 0 0; z-index: 2; padding: var(--s-m) var(--s-s); display: grid; gap: .4em; transition: transform 600ms var(--ease); }
.sercard .nm { font-size: clamp(24px, 2.2vw, 40px); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .98; }
.sercard .nm .w-light { font-weight: 500; color: var(--gold-200); }
.sercard .ct { font-size: var(--t-small); color: rgba(255, 255, 255, .9); }
.sercard:hover .photo img, .sercard:focus-visible .photo img { transform: scale(1.06); }
.sercard:hover .cap, .sercard:focus-visible .cap { transform: translateY(-6px); }
.sercard:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 0; }
.series-band .ctrl { display: flex; gap: var(--s-xs); }
.archive .tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-s); margin-bottom: var(--s-l); }
.archive .count { color: var(--muted); }
/* 18 Oct: the channel gets its own band, not a half-empty strip */
.yt2 { text-align: center; overflow: hidden; }
.yt2 .inner { display: grid; justify-items: center; gap: var(--s-s); position: relative; z-index: 1; }
.yt2 .btns { justify-content: center; margin-top: var(--s-xs); }
.yt2 .watermark { width: min(56%, 760px); left: -14%; top: -30%; color: rgba(255, 255, 255, .04); }
@media (max-width: 1024px) { .latest .photo, .latest .txt { grid-column: 1 / -1; } .series-band .hslider { --hs-col: minmax(240px, 70%); } }
.band-sm .btn { justify-self: start; width: auto; }
/* 19 Oct round 3: the latest message holds the whole screen */
.latestband { min-height: 100svh; display: grid; align-items: center; }