/* Shared spacing and interaction rhythm for the portfolio. */
:root {
  --section-space: 32px;
  --section-space-first: 64px;
  --section-gap: 64px;
}

main > section { padding-block: var(--section-space); }
main > section:first-child { padding-top: var(--section-space-first); }

/* Keep inner pages on the homepage's 64px section rhythm. */
body:not(:has(#currently-working-on)) main > section {
  margin-block: 0 !important;
}
body:not(:has(#currently-working-on)) main > .content-expander {
  margin-block: var(--section-space) !important;
}

/* Introductory title and summary are one editorial unit on every listing page. */
body:not(:has(#currently-working-on)) main > section:first-child {
  padding-bottom: 8px;
}
body:not(:has(#currently-working-on)) main > section:first-child + section {
  padding-top: 8px;
  padding-bottom: 8px;
}
body:not(:has(#currently-working-on)) main > section:first-child + section + section {
  padding-top: 28px;
}

/* Shared shell for lightweight project-detail pages. */
.project-page-header { margin-bottom: 32px; }
.project-page-header nav { width: 100%; gap: 24px; }
.project-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.project-brand-mark { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.project-page-header .project-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.project-page-header .project-nav a { text-decoration: none; }
.project-page-footer { margin: 80px 0 0; }
.project-page-footer .container { display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 543px) {
  .project-page-header nav { align-items: flex-start; flex-direction: column; gap: 16px; }
  .project-page-header .project-nav { gap: 12px; }
}

/* The homepage title and biography belong to one introduction, not two major sections. */
body:has(#currently-working-on) main > section:first-child { padding-bottom: 8px; }
body:has(#currently-working-on) main > section:first-child .h1 { margin-bottom: 0 !important; }
body:has(#currently-working-on) main > section:first-child + section {
  padding-top: 8px;
  padding-bottom: 8px;
}
body:has(#currently-working-on) main > section:first-child + section + section { padding-top: 28px; }

@media (hover: hover) {
  .content-grid > .content,
  .list-container:has(a) > .item {
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .2s ease, box-shadow .2s ease;
  }
  .content-grid > .content:hover { transform: translateY(-2px); }
  .content-grid > .content:hover .trailingIcon { transform: translate(2px, -2px); }
  .trailingIcon { transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
}

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-fg-emphasis);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Ideas: a quiet horizontal video rail keeps each episode easy to scan. */
.video-actions { display: flex; align-items: center; gap: 10px; }
.video-carousel-controls { display: inline-flex; gap: 6px; }
.video-carousel-button {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--color-border-default); border-radius: 50%; background: transparent;
  color: var(--color-fg-muted); cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.video-carousel-button:hover:not(:disabled) { background: var(--color-bg-subtle); border-color: var(--color-line-emphasis); color: var(--color-fg-default); }
.video-carousel-button:disabled { cursor: default; opacity: .35; }
.video-carousel {
  display: flex; gap: 18px; overflow-x: auto; padding: 2px 2px 14px; margin-inline: -2px;
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent;
  overscroll-behavior-inline: contain;
}
.video-carousel-card {
  flex: 0 0 clamp(248px, 34vw, 312px); scroll-snap-align: start; text-decoration: none;
}
.video-carousel-card .content-card { height: 100%; }
.video-carousel-card .image-wrapper { min-height: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.video-carousel-card .image-wrapper .image { width: 100%; height: 100%; object-fit: cover; }
.video-carousel-card .info .title { min-height: 2.6em; }
.video-carousel-card:hover { text-decoration: none; }
@media (max-width: 543px) {
  .video-actions { gap: 8px; }
  .video-channel-link { padding-inline: 8px; }
  .video-carousel-card { flex-basis: min(82vw, 312px); }
}