/* Four simple category tiles, matching the requested portfolio layout. */
:root { --side: calc(100vw / 6); }
body .site-sidebar { padding: 24px 14px 18px; }
body .site-brand { font-size: 27px; }
body .site-brand span { font-size: 8px; letter-spacing: .11em; }
body .site-nav { margin-top: 48px; }
body .site-nav a { padding: 12px 0; font-size: 10px; letter-spacing: .07em; }
body .sidebar-meta { font-size: 8px; letter-spacing: .06em; }
body .sidebar-meta b { font-size: 9px; }
body .site-nav a { color: var(--yellow); }
body.home .tile-home { height: 100vh; overflow: hidden; padding: 0; }
body.home .tile-stack { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 100%; max-width: none; margin: 0; gap: 0; }
body.home .portfolio-tile { min-height: 100%; padding: 32px 23px; align-items: flex-start; border-right: 1px solid rgba(255,255,255,.35); }
body.home .portfolio-tile:last-child { border-right: 0; }
body.home .portfolio-tile:before { background: linear-gradient(180deg, rgba(13,16,15,.62), rgba(13,16,15,.22) 48%, rgba(13,16,15,.62)); }
body.home .portfolio-tile:hover:before { background: linear-gradient(180deg, rgba(13,16,15,.72), rgba(13,16,15,.10) 48%, rgba(13,16,15,.68)); }
body.home .portfolio-tile__body { max-width: none; }
body.home .portfolio-tile__kicker { margin: 0 0 10px; color: var(--yellow); font-size: 9px; line-height: 1.4; letter-spacing: .13em; }
body.home .portfolio-tile h2 { margin: 0; font-size: clamp(22px, 1.8vw, 28px); line-height: .94; letter-spacing: -.06em; overflow-wrap: normal; word-break: normal; }
body.home .portfolio-tile__arrow { right: 20px; bottom: 24px; width: 40px; height: 40px; font-size: 18px; }
body.home .site-footer { display: none; }
body.home .portfolio-tile__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
body.home .portfolio-tile__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
body.home .tile-rotator { display: block; min-height: 1.7em; margin-top: 13px; color: var(--yellow); font-family: Georgia, serif; font-size: .57em; font-style: italic; font-weight: 400; letter-spacing: -.02em; line-height: 1.04; opacity: 1; transform: translateY(0); transition: opacity .32s ease, transform .32s ease; }
body.home .tile-rotator.is-changing { opacity: 0; transform: translateY(8px); }

@media (max-width: 960px) {
  body.home .tile-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; }
  body.home .tile-home { height: auto; overflow: visible; }
  body.home .portfolio-tile { min-height: 52vh; padding: 26px 18px; }
  body.home .portfolio-tile h2 { font-size: 33px; }
}

@media (max-width: 680px) {
	:root { --side: 0; }
  body.home .tile-home { height: auto; overflow: visible; }
  body.home .tile-stack { grid-template-columns: 1fr; height: auto; }
  body.home .portfolio-tile { min-height: 62vh; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.35); }
  body.home .portfolio-tile h2 { font-size: 46px; }
}

/* Navigation portrait enhancement */
@media (min-width: 861px) {
  body .site-sidebar {
    background-color: #202322;
    background-image:
      linear-gradient(180deg, rgba(22, 24, 23, .56) 0%, rgba(22, 24, 23, .70) 49%, rgba(22, 24, 23, .96) 100%),
      url('../images/navigation-portrait-artistic.jpg'),
      linear-gradient(145deg, #303534 0%, #202322 58%, #111312 100%);
    background-position: center, 58% center, center;
    background-repeat: no-repeat;
    background-size: cover, cover, cover;
  }

  body .site-sidebar::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, .24), transparent 55%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
  }

  body .site-sidebar > * {
    position: relative;
    z-index: 1;
  }
}

/* Homepage slideshow transitions and sidebar social links. */
body.home .portfolio-tile.is-sliding:before { background: linear-gradient(180deg, rgba(13,16,15,.82), rgba(13,16,15,.45) 48%, rgba(13,16,15,.82)); }
body.home .portfolio-tile__media video { transition: opacity .26s ease; }
body.home .portfolio-tile__media video.is-switching { opacity: 0; }
body .sidebar-social { display: flex; flex-wrap: wrap; gap: 6px; margin: 15px 0 0; }
body .sidebar-social a { border: 1px solid rgba(255,255,255,.42); color: #f4f3ee; font-size: 8px; font-weight: 700; letter-spacing: .055em; line-height: 1; padding: 7px 6px; text-decoration: none; text-transform: uppercase; transition: background .2s ease, border-color .2s ease, color .2s ease; }
body .sidebar-social a:hover, body .sidebar-social a:focus-visible { background: var(--yellow); border-color: var(--yellow); color: #1b1d1c; outline: 0; }

@media (max-width: 680px) {
  body .sidebar-social { display: none; }
}

/* YouTube video gallery. */
body .video-gallery-page { max-width: 1240px; }
body .video-gallery-page__header { max-width: 700px; margin-bottom: 34px; }
body .video-gallery-page__header .eyebrow { margin-bottom: 8px; }
body .video-gallery-page__header p:last-child { color: rgba(244,243,238,.72); margin: 14px 0 0; }
body .youtube-playlist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body .youtube-playlist-card { background: #202322; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 12px 28px rgba(0,0,0,.18); overflow: hidden; }
body .youtube-playlist-card h2 { color: var(--yellow); font-size: 12px; letter-spacing: .11em; margin: 0; padding: 15px 16px; text-transform: uppercase; }
body .youtube-playlist-card__frame { aspect-ratio: 16 / 9; background: #101211; }
body .youtube-playlist-card iframe { border: 0; display: block; height: 100%; width: 100%; }
body .video-gallery-page__local { border-top: 1px solid rgba(255,255,255,.18); margin-top: 48px; padding-top: 34px; }
body .video-gallery-page__local > h2 { color: var(--yellow); font-size: 15px; letter-spacing: .11em; margin: 0 0 22px; text-transform: uppercase; }
@media (max-width: 1100px) { body .youtube-playlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { body .youtube-playlist-grid { grid-template-columns: 1fr; gap: 16px; } body .video-gallery-page__local { margin-top: 34px; } }