.head { position: relative; min-height: 520px; display: flex; flex-direction: column; }
.head canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.head .intro { position: relative; z-index: 2; margin-top: auto; padding: 0 var(--m) 56px; width: min(860px, 56%); }
.head h1 { font-size: var(--s-mega); line-height: 0.88; letter-spacing: -0.05em; font-weight: 500; }
.entries { list-style: none; margin: 0; padding: 0; }
.entry { align-items: end; padding-top: 72px; text-decoration: none; color: var(--ink); }
.entry .cover { grid-column: 1 / 8; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--surface); }
.entry .cover video { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-soft); }
.entry:hover .cover video { transform: scale(1.03); }
.entry .meta { grid-column: 8 / 13; padding-left: 8px; }
.entry h2 { font-size: var(--s-head); line-height: 1; letter-spacing: -0.035em; font-weight: 500; transition: color var(--t-hover); }
.entry:hover h2 { color: #3d9be9; }
.entry .sub { margin-top: 12px; font-size: var(--s-lead); }
.entry .dek { margin-top: 16px; max-width: 40ch; }
.entry .when { margin-top: 12px; }
.entry .btn { margin-top: 26px; }
.inside { padding: 96px var(--m) 0; }
.inside h3 { font-size: var(--s-lead); font-weight: 600; margin-bottom: 20px; }
.inside ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); list-style: none; margin: 0; padding: 0; }
.inside a { display: block; color: var(--ink); text-decoration: none; }
.inside figure { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--surface); }
/* Pass the selected page theme to the SVGs' own color-scheme media queries. */
.inside img { color-scheme: light; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-soft); }
[data-theme="dark"] .inside img { color-scheme: dark; }
.inside a:hover img { transform: scale(1.04); }
.inside span { display: block; margin-top: 10px; }
@media (max-width: 760px) {
  .head { min-height: 0; }
  .head canvas { display: none; }
  .head .intro { padding-top: 56px; padding-bottom: 8px; width: 100%; }
  .head h1 { font-size: 19vw; }
  .entry { padding-top: 48px; }
  .entry .cover, .entry .meta { grid-column: 1 / -1; }
  .entry .meta { padding: 24px 0 0; }
  .inside { padding-top: 72px; }
  .inside ul { grid-template-columns: 1fr 1fr; }
}