/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #040404;
}

::-webkit-scrollbar-thumb {
  background: rgba(3, 2, 1, 0.25);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 249, 240, 0.4);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 249, 240, 0.25) #040404;
}

/* Base */
html {
  scroll-behavior: smooth;
  background: #040404;
}

html, body {
  height: 100%;
}

body {
  background: #040404;
  color: rgba(255, 249, 240, 0.85);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.83rem;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  -webkit-tap-highlight-color: transparent;
}

/* Main content wrapper - full width index */
.main-content {
  width: 100%;
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width 0.4s ease, opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  /* GPU acceleration for smooth scrolling */
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
}

/* When panel is open, shrink main content (25% of 1600px = 400px max) */
body.panel-open .main-content {
  width: min(25vw, 400px);
  opacity: 0.15;
}

body.panel-open .main-content:hover {
  opacity: 1;
}

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #040404;
  padding: 1rem;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.header-left {
  flex: 1;
  min-width: 0;
}

.header-logo {
  height: 2.5rem;
  width: auto;
  flex-shrink: 0;
}

.header h1 {
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  transition: opacity 0.2s ease;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fade out state for header text */
.header h1.fading {
  opacity: 0;
}

/* Logo as close button when panel open */
body.panel-open .logo {
  cursor: pointer;
}

body.panel-open .logo:hover {
  color: #888;
}

body.panel-open .header-logo {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

body.panel-open .header-logo:hover {
  opacity: 0.5;
}

.header p {
  color: #888;
  font-size: 0.9rem;
  transition: font-size 0.4s ease;
}

/* Header Navigation */
.nav {
  margin-top: 0.75rem;
  transition: opacity 0.2s ease;
  height: 1.5em;
  overflow: hidden;
}

.nav.fading {
  opacity: 0;
}

.nav-link {
  color: rgba(255, 249, 240, 0.4);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
  user-select: none;
}

.nav-link:hover,
.nav-link.active {
  color: rgba(255, 249, 240, 0.85);
}

.nav-link:active {
  transform: scale(0.95);
}

.nav-sep {
  color: rgba(255, 249, 240, 0.25);
  margin: 0 0.4em;
  transition: opacity 0.2s ease;
}

/* Fade nav when showing project title (unless showing description) */
.header.showing-title .nav {
  opacity: 0.3;
}

.header.showing-title .nav:has(.nav-description) {
  opacity: 1;
}

.nav-description {
  color: rgba(255, 249, 240, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}


/* Footer Toolbar */
.footer {
  position: sticky;
  bottom: 0;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #040404;
  border-top: 1px solid rgba(255, 249, 240, 0.1);
  flex-shrink: 0;
}

.footer-btn {
  background: none;
  border: none;
  color: rgba(255, 249, 240, 0.6);
  font-family: inherit;
  font-size: inherit;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}

.footer-btn:hover {
  color: rgba(255, 249, 240, 0.85);
}

.footer-btn i {
  font-size: 0.9rem;
}

.footer-btn.scroll-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.footer-btn.scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.footer-socials {
  display: flex;
  gap: 1.5rem;
}

.footer-socials a {
  color: rgba(255, 249, 240, 0.4);
  text-decoration: none;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
}

.footer-socials a:hover {
  color: rgba(255, 249, 240, 0.85);
}

.footer-socials i {
  font-size: 0.9rem;
}

/* Panel header/footer - hidden by default on desktop */
.panel-mobile-header,
.panel-footer {
  display: none;
}

/* Panel Toolbar (desktop) */
.panel-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #040404;
  border-top: 1px solid rgba(255, 249, 240, 0.1);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.panel.content-loaded .panel-toolbar {
  opacity: 1;
}

.panel-toolbar-btn {
  background: none;
  border: none;
  color: rgba(255, 249, 240, 0.6);
  font-family: inherit;
  font-size: inherit;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}

.panel-toolbar-btn:hover {
  color: rgba(255, 249, 240, 0.85);
}

.panel-toolbar-btn i {
  font-size: 0.9rem;
}

.panel-toolbar-btn.scroll-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.panel-toolbar-btn.scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Center content - hidden on desktop, shown on mobile */
.panel-toolbar-center {
  display: none;
}

/* Category Filters (inside header-left) */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 1rem;
  margin-top: 1rem;
}

/* Hide dot separators - use gap instead */
.filter-sep {
  display: none;
}

.filter-btn {
  background: none;
  border: none;
  color: rgba(255, 249, 240, 0.4);
  padding: 0;
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.1s ease;
  user-select: none;
  font-family: inherit;
  font-size: inherit;
  text-transform: uppercase;
  text-align: left;
}

.filter-btn:hover {
  color: rgba(255, 249, 240, 0.85);
}

.filter-btn:active {
  transform: scale(0.95);
}

.filter-btn.active {
  color: rgba(255, 249, 240, 0.85);
}

.filter-btn.filter-dimmed {
  opacity: 0.3;
}

.filter-btn.filter-highlighted {
  color: rgba(255, 249, 240, 0.85);
}

/* Clear filter button - hidden until filters are active */
.filter-clear {
  display: none;
  margin-left: 1em;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.filter-clear.visible {
  display: inline;
}


/* Filters fade transition */
.filters {
  transition: opacity 0.3s ease, max-height 0.4s ease, padding 0.4s ease, margin-top 0.4s ease;
  max-height: 100px;
  overflow: hidden;
}

/* Fade opacity first */
.filters.fading {
  opacity: 0;
  pointer-events: none;
}

/* Collapse with panel slide */
body.panel-open .filters {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  margin-top: 0;
  padding-bottom: 0;
}

/* Filtered out thumbnails */
.thumb.filtered-out {
  display: none;
}

/* Thumbnail Grid */
.gallery {
  display: grid;
  /* Max 5 columns: each column is at least 20% minus gap */
  grid-template-columns: repeat(auto-fill, minmax(max(200px, calc(20% - 3.2px)), 1fr));
  gap: 4px;
  padding: 4px;
  transition: grid-template-columns 0.4s ease;
  flex: 1;
  align-content: start;
}

/* Gallery when panel open - single column */
body.panel-open .gallery {
  grid-template-columns: 1fr;
}

.thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.5s ease, transform 0.5s ease;
  /* Start hidden for fade-in effect */
  opacity: 0;
  transform: translateY(20px);
  user-select: none;
  /* Isolate layout/paint for scroll performance */
  contain: layout paint;
}

.thumb:active {
  transform: scale(0.98);
}

/* Fade in when visible (Intersection Observer) */
.thumb.visible {
  opacity: 1;
  transform: translateY(0);
}

.thumb img,
.thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
  /* GPU layer for smooth scroll */
  transform: translateZ(0);
}

.thumb video {
  pointer-events: none;
}

/* Hover state: fade non-matching thumbnails */
.gallery.has-hover .thumb.visible {
  opacity: 0.08;
}

.gallery.has-hover .thumb.visible.highlighted {
  opacity: 1;
}

.gallery.has-hover .thumb.highlighted img {
  transform: scale(1.02);
}

/* Active state when panel is open */
.gallery.has-active .thumb.visible {
  opacity: 0.15;
}

.gallery.has-active .thumb.visible.active-thumb {
  opacity: 1;
}

/* Hover overrides active state */
.gallery.has-active.has-hover .thumb.visible {
  opacity: 0.08;
}

.gallery.has-active.has-hover .thumb.visible.highlighted {
  opacity: 1;
}

/* Placeholder for missing images */
.thumb img[src*="placeholder"] {
  background: #222;
}

/* Content Panel */
.panel {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100% - min(25vw, 400px));
  height: 100%;
  background: #040404;
  border-left: 1px solid transparent;
  transform: translateX(100%);
  transition: transform 0.4s ease, border-color 0.4s ease, background-color 0.6s ease;
  z-index: 101;
  display: flex;
  flex-direction: column;
}

.panel.exiting {
  background: rgba(255, 249, 240, 0.85);
}

.panel.active {
  transform: translateX(0);
  border-left-color: rgba(255, 249, 240, 0.1);
}

.panel-close {
  position: absolute;
  top: -0.8rem;
  right: 0;
  background: none;
  border: none;
  color: rgba(255, 249, 240, 0.85);
  font-size: 2rem;
  padding: 1rem;
  cursor: pointer;
  z-index: 102;
}

.panel-close:hover {
  color: rgba(255, 249, 240, 0.5);
}

.panel-content {
  padding: 2rem;
  padding-top: 0.8rem;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  /* GPU acceleration for smooth scrolling */
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
}

/* Content fade-in animation */
.panel-content.fade-in > * {
  animation: contentFadeIn 0.4s ease forwards;
  opacity: 0;
}

.panel-content.fade-in > *:nth-child(1) { animation-delay: 0s; }
.panel-content.fade-in > *:nth-child(2) { animation-delay: 0.05s; }
.panel-content.fade-in > *:nth-child(3) { animation-delay: 0.1s; }
.panel-content.fade-in > *:nth-child(4) { animation-delay: 0.15s; }
.panel-content.fade-in > *:nth-child(5) { animation-delay: 0.2s; }
.panel-content.fade-in > *:nth-child(n+6) { animation-delay: 0.25s; }

@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Content slide-out animation (used when switching pages) */
.panel-content.fade-out {
  animation: contentSlideOut 0.3s ease forwards;
}

@keyframes contentSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(50px);
  }
}

/* Content fade during panel close (fades while panel slides) */
.panel-content.closing {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Loading spinner */
.panel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #333;
  border-top-color: #d1d1d1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Typography in panel */
.panel-content h1,
.panel-content h2,
.panel-content h3,
.panel-content h4,
.panel-content h5,
.panel-content h6 {
  font-size: inherit;
  font-weight: 400;
  display: inline-block;
}

.panel-content h1 {
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 249, 240, 0.85);
  box-shadow:
    0 2px 0 0 #040404,
    0 3px 0 0 rgba(255, 249, 240, 0.85),
    0 5px 0 0 #040404,
    0 6px 0 0 rgba(255, 249, 240, 0.85);
  padding-bottom: 6px;
  margin-bottom: 1.5rem;
}

.panel-content h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 249, 240, 0.85);
  box-shadow:
    0 2px 0 0 #040404,
    0 3px 0 0 rgba(255, 249, 240, 0.85);
  padding-bottom: 3px;
  margin-bottom: 1.25rem;
}

.panel-content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 249, 240, 0.85);
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
}

.panel-content p {
  margin-bottom: 1rem;
  text-transform: none;
}

/* Limit width of content for readability (headlines and meta stay full width) */
.panel-content p,
.panel-content ul,
.panel-content ol,
.panel-content blockquote,
.panel-content pre,
.panel-content .callout,
.panel-content .md-video,
.panel-content .md-video-gallery,
.panel-content .md-hls-video,
.panel-content .md-hls-video-gallery,
.panel-content .md-gallery,
.panel-content .md-logos,
.panel-content .md-splits {
  max-width: 1200px;
}

.panel-content a {
  color: rgba(0, 120, 212, 0.85);
  text-decoration: underline;
  transition: filter 0.15s ease;
}

.panel-content a:hover {
  filter: brightness(1.4);
}

.panel-content a:active {
  filter: brightness(0.9);
}

/* Selection styling for content links */
.panel-content a::selection {
  background: rgba(0, 120, 212, 0.85);
  color: #040404;
}

/* Page color themed links */
.panel-content[data-page-color="tan"] a { color: rgba(126, 115, 95, 0.85); }
.panel-content[data-page-color="gray-blue"] a { color: rgba(105, 121, 126, 0.85); }
.panel-content[data-page-color="yellow"] a { color: rgba(217, 166, 68, 0.85); }
.panel-content[data-page-color="orange"] a { color: rgba(188, 75, 34, 0.85); }
.panel-content[data-page-color="coral"] a { color: rgba(239, 105, 80, 0.85); }
.panel-content[data-page-color="salmon"] a { color: rgba(217, 108, 90, 0.85); }
.panel-content[data-page-color="red"] a { color: rgba(209, 52, 56, 0.85); }
.panel-content[data-page-color="bright-red"] a { color: rgba(255, 67, 67, 0.85); }
.panel-content[data-page-color="magenta"] a { color: rgba(194, 57, 179, 0.85); }
.panel-content[data-page-color="blue"] a { color: rgba(0, 120, 212, 0.85); }
.panel-content[data-page-color="sky-blue"] a { color: rgba(107, 158, 206, 0.85); }
.panel-content[data-page-color="light-purple"] a { color: rgba(142, 140, 216, 0.85); }
.panel-content[data-page-color="purple"] a { color: rgba(135, 100, 184, 0.85); }
.panel-content[data-page-color="lavender"] a { color: rgba(167, 139, 218, 0.85); }
.panel-content[data-page-color="violet"] a { color: rgba(177, 70, 194, 0.85); }
.panel-content[data-page-color="teal"] a { color: rgba(45, 125, 154, 0.85); }
.panel-content[data-page-color="warm-gray"] a { color: rgba(122, 117, 116, 0.85); }
.panel-content[data-page-color="cool-gray"] a { color: rgba(104, 118, 138, 0.85); }
.panel-content[data-page-color="sage"] a { color: rgba(86, 124, 115, 0.85); }
.panel-content[data-page-color="green"] a { color: rgba(100, 124, 100, 0.85); }
.panel-content[data-page-color="grass"] a { color: rgba(95, 170, 109, 0.85); }
.panel-content[data-page-color="olive"] a { color: rgba(132, 117, 69, 0.85); }

.panel-content ::selection {
  background: rgba(255, 249, 240, 0.3);
  color: inherit;
}

.panel-content ul, .panel-content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  text-transform: none;
}

.panel-content ol {
  padding-left: 2.14rem;
}

.panel-content li::marker {
  color: rgba(255, 249, 240, 0.85);
}

.panel-content li {
  margin-bottom: 0.25rem;
}

.panel-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
}

.panel-content blockquote {
  border-left: 2px solid rgba(255, 249, 240, 0.3);
  padding-left: 1rem;
  margin: 1rem 0;
  color: rgba(255, 249, 240, 0.6);
}

.panel-content hr {
  border: none;
  border-top: 1px solid rgba(255, 249, 240, 0.3);
  margin: 1.5rem 0;
}

.md-spacer {
  height: 1.5rem;
}

/* Callouts - uses page color theme */
.callout {
  border: 1px solid rgba(255, 249, 240, 0.85);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

.callout-title {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid currentColor;
}

.callout p {
  margin: 0;
  opacity: 0.7;
}

/* Page color themed callouts */
.panel-content[data-page-color="tan"] .callout { border-color: rgba(126, 115, 95, 0.85); color: rgba(126, 115, 95, 0.85); }
.panel-content[data-page-color="gray-blue"] .callout { border-color: rgba(105, 121, 126, 0.85); color: rgba(105, 121, 126, 0.85); }
.panel-content[data-page-color="yellow"] .callout { border-color: rgba(217, 166, 68, 0.85); color: rgba(217, 166, 68, 0.85); }
.panel-content[data-page-color="orange"] .callout { border-color: rgba(188, 75, 34, 0.85); color: rgba(188, 75, 34, 0.85); }
.panel-content[data-page-color="coral"] .callout { border-color: rgba(239, 105, 80, 0.85); color: rgba(239, 105, 80, 0.85); }
.panel-content[data-page-color="salmon"] .callout { border-color: rgba(217, 108, 90, 0.85); color: rgba(217, 108, 90, 0.85); }
.panel-content[data-page-color="red"] .callout { border-color: rgba(209, 52, 56, 0.85); color: rgba(209, 52, 56, 0.85); }
.panel-content[data-page-color="bright-red"] .callout { border-color: rgba(255, 67, 67, 0.85); color: rgba(255, 67, 67, 0.85); }
.panel-content[data-page-color="magenta"] .callout { border-color: rgba(194, 57, 179, 0.85); color: rgba(194, 57, 179, 0.85); }
.panel-content[data-page-color="blue"] .callout { border-color: rgba(0, 120, 212, 0.85); color: rgba(0, 120, 212, 0.85); }
.panel-content[data-page-color="sky-blue"] .callout { border-color: rgba(107, 158, 206, 0.85); color: rgba(107, 158, 206, 0.85); }
.panel-content[data-page-color="light-purple"] .callout { border-color: rgba(142, 140, 216, 0.85); color: rgba(142, 140, 216, 0.85); }
.panel-content[data-page-color="purple"] .callout { border-color: rgba(135, 100, 184, 0.85); color: rgba(135, 100, 184, 0.85); }
.panel-content[data-page-color="lavender"] .callout { border-color: rgba(167, 139, 218, 0.85); color: rgba(167, 139, 218, 0.85); }
.panel-content[data-page-color="violet"] .callout { border-color: rgba(177, 70, 194, 0.85); color: rgba(177, 70, 194, 0.85); }
.panel-content[data-page-color="teal"] .callout { border-color: rgba(45, 125, 154, 0.85); color: rgba(45, 125, 154, 0.85); }
.panel-content[data-page-color="warm-gray"] .callout { border-color: rgba(122, 117, 116, 0.85); color: rgba(122, 117, 116, 0.85); }
.panel-content[data-page-color="cool-gray"] .callout { border-color: rgba(104, 118, 138, 0.85); color: rgba(104, 118, 138, 0.85); }
.panel-content[data-page-color="sage"] .callout { border-color: rgba(86, 124, 115, 0.85); color: rgba(86, 124, 115, 0.85); }
.panel-content[data-page-color="green"] .callout { border-color: rgba(100, 124, 100, 0.85); color: rgba(100, 124, 100, 0.85); }
.panel-content[data-page-color="grass"] .callout { border-color: rgba(95, 170, 109, 0.85); color: rgba(95, 170, 109, 0.85); }
.panel-content[data-page-color="olive"] .callout { border-color: rgba(132, 117, 69, 0.85); color: rgba(132, 117, 69, 0.85); }

.panel-content code {
  background: rgba(255, 249, 240, 0.1);
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

.panel-content pre {
  overflow-x: auto;
  margin: 1rem 0;
  border-radius: 4px;
}

.panel-content pre code {
  padding: 1rem;
  border-radius: 4px;
}

.panel-content pre code:not(.hljs) {
  background: rgba(255, 249, 240, 0.08);
}

/* Gallery Block */
.md-gallery {
  --gallery-cols: 4;
  display: grid;
  /* Configurable columns via --gallery-cols variable */
  grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(100% / var(--gallery-cols) - 0.375rem)), 1fr));
  gap: 0.5rem;
  margin: 1.5rem 0;
}

.md-gallery figure {
  margin: 0;
  /* Placeholder background while loading */
  background: rgba(255, 249, 240, 0.03);
  /* Isolate layout/paint for scroll performance */
  contain: layout paint;
}

.md-gallery img {
  width: 100%;
  height: auto;
  margin: 0;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s ease;
  /* GPU layer for smooth scroll */
  transform: translateZ(0);
}

.md-gallery figcaption {
  font-size: 0.85rem;
  color: rgba(255, 249, 240, 0.85);
  margin-top: 0.25rem;
  transition: color 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-gallery figure:hover img {
  opacity: 0.6;
}

.md-gallery figure:hover figcaption {
  color: rgba(255, 249, 240, 0.5);
}

/* Logo Gallery Block */
.md-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(20% - 1.5rem), 1fr));
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
  margin: 1.5rem 0;
}

.md-logos img {
  height: 2.5rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .md-logos {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Splits Block (A/B Image Comparison) */
.md-splits {
  --splits-cols: 2;
  display: grid;
  /* Configurable columns via --splits-cols variable */
  grid-template-columns: repeat(var(--splits-cols), 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.md-split-item {
  position: relative;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}

.md-split-before,
.md-split-after {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.md-split-after {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(0 0 0 50%);
}

.md-split-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: currentColor;
  transform: translateX(-50%);
  pointer-events: none;
}

.md-split-handle::before,
.md-split-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.md-split-handle::before {
  right: 100%;
  margin-right: 4px;
  transform: translateY(-50%);
  border-right: 8px solid currentColor;
}

.md-split-handle::after {
  left: 100%;
  margin-left: 4px;
  transform: translateY(-50%);
  border-left: 8px solid currentColor;
}

.md-split-caption {
  display: block;
  margin-top: 0.5rem;
  color: rgba(255, 249, 240, 0.6);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .md-splits {
    grid-template-columns: 1fr;
  }
}

/* Video Block */
.md-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin: 1.5rem 0;
}

.md-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Video Gallery Block */
.md-video-gallery {
  margin: 1.5rem 0;
}

.md-video-gallery-player {
  margin-bottom: 1rem;
}

.md-video-gallery-player .md-video {
  margin: 0;
}

.md-video-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
}

.md-video-gallery-thumb {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.2s ease;
  opacity: 0.2;
  font-family: inherit;
  font-size: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

.md-video-gallery-thumb:hover {
  opacity: 0.5;
}

.md-video-gallery-thumb.active {
  opacity: 1;
}

.md-video-gallery-thumb-img {
  position: relative;
}

.md-video-gallery-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin: 0;
}

.md-video-gallery-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(4, 4, 4, 0.5);
  border-radius: 5px;
  color: rgba(255, 249, 240, 0.85);
  width: 3.2em;
  height: 2.6em;
  padding: 0.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background 0.2s ease;
}

.md-video-gallery-thumb:hover .md-video-gallery-thumb-play,
.md-video-gallery-thumb:hover .md-video-gallery-thumb-active {
  background: rgba(4, 4, 4, 0.9);
}

.md-video-gallery-thumb-active {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(4, 4, 4, 0.9);
  border-radius: 5px;
  color: rgba(255, 249, 240, 0.85);
  width: 3.2em;
  height: 2.6em;
  padding: 0.7em;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background 0.2s ease;
}

.md-video-gallery-thumb.active .md-video-gallery-thumb-play {
  display: none;
}

.md-video-gallery-thumb.active .md-video-gallery-thumb-active {
  display: flex;
}

.md-video-gallery-thumb-active svg {
  width: 0.5em;
  height: 0.5em;
}

.md-video-gallery-thumb-play svg {
  width: 1em;
  height: 1em;
}

.md-video-gallery-thumb-caption {
  display: block;
  padding: 0.4rem 0;
  color: rgba(255, 249, 240, 0.6);
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-video-gallery-thumb.active .md-video-gallery-thumb-caption {
  color: rgba(255, 249, 240, 0.85);
}

/* HLS Video Block (Video.js) */
.md-hls-video {
  position: relative;
  margin: 1.5rem 0;
}

.md-hls-video .video-js {
  background: #000;
  font-family: inherit;
}

/* Override VideoJS padding-top aspect ratio hack to fix sub-pixel gap */
.md-hls-video .video-js.vjs-fluid,
.md-hls-video .video-js.vjs-16-9 {
  padding-top: 56.3% !important;
}

/* Custom poster overlay */
.md-hls-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.md-hls-poster.hidden {
  display: none;
}

.md-hls-poster-play {
  background: rgba(4, 4, 4, 0.5);
  border: none;
  border-radius: 8px;
  color: rgba(255, 249, 240, 0.85);
  width: 3em;
  height: 2em;
  font-size: 1.5rem;
  padding: 0.3em;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.md-hls-poster-play:hover {
  background: rgba(4, 4, 4, 0.9);
}

.md-hls-poster-play svg {
  width: 60%;
  height: 60%;
}

/* Hide Video.js default big play button when we have custom poster */
.md-hls-video:has(.md-hls-poster) .vjs-big-play-button {
  display: none;
}

.md-hls-video .vjs-big-play-button {
  background-color: rgba(255, 249, 240, 0.1);
  border: 1px solid rgba(255, 249, 240, 0.3);
  border-radius: 0;
  font-size: 2em;
  line-height: 1.5em;
  height: 1.5em;
  width: 2em;
}

.md-hls-video .vjs-big-play-button:hover {
  background-color: rgba(255, 249, 240, 0.2);
}

.md-hls-video .vjs-control-bar {
  background: rgba(4, 4, 4, 0.9);
}

.md-hls-video .vjs-progress-holder {
  background: rgba(0, 120, 212, 0.3); /* blue default */
}

/* Progress bar color theming - matches page color from frontmatter */
.panel-content[data-page-color="tan"] .vjs-progress-holder { background: rgba(126, 115, 95, 0.3); }
.panel-content[data-page-color="gray-blue"] .vjs-progress-holder { background: rgba(105, 121, 126, 0.3); }
.panel-content[data-page-color="yellow"] .vjs-progress-holder { background: rgba(217, 166, 68, 0.3); }
.panel-content[data-page-color="orange"] .vjs-progress-holder { background: rgba(218, 120, 1, 0.3); }
.panel-content[data-page-color="coral"] .vjs-progress-holder { background: rgba(255, 112, 88, 0.3); }
.panel-content[data-page-color="salmon"] .vjs-progress-holder { background: rgba(226, 121, 121, 0.3); }
.panel-content[data-page-color="red"] .vjs-progress-holder { background: rgba(196, 85, 85, 0.3); }
.panel-content[data-page-color="bright-red"] .vjs-progress-holder { background: rgba(224, 32, 32, 0.3); }
.panel-content[data-page-color="magenta"] .vjs-progress-holder { background: rgba(188, 93, 162, 0.3); }
.panel-content[data-page-color="blue"] .vjs-progress-holder { background: rgba(0, 120, 212, 0.3); }
.panel-content[data-page-color="sky-blue"] .vjs-progress-holder { background: rgba(107, 158, 206, 0.3); }
.panel-content[data-page-color="light-purple"] .vjs-progress-holder { background: rgba(142, 140, 216, 0.3); }
.panel-content[data-page-color="purple"] .vjs-progress-holder { background: rgba(110, 73, 167, 0.3); }
.panel-content[data-page-color="lavender"] .vjs-progress-holder { background: rgba(179, 158, 213, 0.3); }
.panel-content[data-page-color="violet"] .vjs-progress-holder { background: rgba(136, 100, 176, 0.3); }
.panel-content[data-page-color="teal"] .vjs-progress-holder { background: rgba(0, 137, 123, 0.3); }
.panel-content[data-page-color="warm-gray"] .vjs-progress-holder { background: rgba(138, 130, 120, 0.3); }
.panel-content[data-page-color="cool-gray"] .vjs-progress-holder { background: rgba(120, 128, 138, 0.3); }
.panel-content[data-page-color="sage"] .vjs-progress-holder { background: rgba(143, 161, 134, 0.3); }
.panel-content[data-page-color="green"] .vjs-progress-holder { background: rgba(85, 150, 85, 0.3); }
.panel-content[data-page-color="grass"] .vjs-progress-holder { background: rgba(96, 153, 54, 0.3); }
.panel-content[data-page-color="olive"] .vjs-progress-holder { background: rgba(128, 128, 0, 0.3); }

/* Play progress - matches body text color */
.md-hls-video .vjs-play-progress,
.md-hls-video .vjs-progress-control .vjs-play-progress {
  background: rgba(255, 249, 240, 0.85);
  background-color: rgba(255, 249, 240, 0.85);
}

/* Video.js theme overrides */

/* Control bar background */
.md-hls-video .vjs-control-bar {
  background-color: rgba(4, 4, 4, 0.7);
}

/* All icons, buttons, and text - body text color */
.md-hls-video .vjs-button,
.md-hls-video .vjs-control,
.md-hls-video .vjs-time-control,
.md-hls-video .vjs-current-time,
.md-hls-video .vjs-duration,
.md-hls-video .vjs-time-divider,
.md-hls-video .vjs-remaining-time,
.md-hls-video .video-js {
  color: rgba(255, 249, 240, 0.85);
}

/* Button hover states */
.md-hls-video .vjs-button:hover {
  color: rgba(255, 249, 240, 1);
  background: rgba(255, 249, 240, 0.1);
}

/* Big play button */
.md-hls-video .vjs-big-play-button {
  background-color: rgba(4, 4, 4, 0.5);
  border-color: rgba(255, 249, 240, 0.5);
}

/* Progress slider background */
.md-hls-video .vjs-progress-control .vjs-slider {
  background-color: rgba(255, 249, 240, 0.2);
}

/* Progress slider color theming */
.panel-content[data-page-color="tan"] .vjs-progress-control .vjs-slider { background-color: rgba(126, 115, 95, 0.2); }
.panel-content[data-page-color="gray-blue"] .vjs-progress-control .vjs-slider { background-color: rgba(105, 121, 126, 0.2); }
.panel-content[data-page-color="yellow"] .vjs-progress-control .vjs-slider { background-color: rgba(217, 166, 68, 0.2); }
.panel-content[data-page-color="orange"] .vjs-progress-control .vjs-slider { background-color: rgba(218, 120, 1, 0.2); }
.panel-content[data-page-color="coral"] .vjs-progress-control .vjs-slider { background-color: rgba(255, 112, 88, 0.2); }
.panel-content[data-page-color="salmon"] .vjs-progress-control .vjs-slider { background-color: rgba(226, 121, 121, 0.2); }
.panel-content[data-page-color="red"] .vjs-progress-control .vjs-slider { background-color: rgba(196, 85, 85, 0.2); }
.panel-content[data-page-color="bright-red"] .vjs-progress-control .vjs-slider { background-color: rgba(224, 32, 32, 0.2); }
.panel-content[data-page-color="magenta"] .vjs-progress-control .vjs-slider { background-color: rgba(188, 93, 162, 0.2); }
.panel-content[data-page-color="blue"] .vjs-progress-control .vjs-slider { background-color: rgba(0, 120, 212, 0.2); }
.panel-content[data-page-color="sky-blue"] .vjs-progress-control .vjs-slider { background-color: rgba(107, 158, 206, 0.2); }
.panel-content[data-page-color="light-purple"] .vjs-progress-control .vjs-slider { background-color: rgba(142, 140, 216, 0.2); }
.panel-content[data-page-color="purple"] .vjs-progress-control .vjs-slider { background-color: rgba(110, 73, 167, 0.2); }
.panel-content[data-page-color="lavender"] .vjs-progress-control .vjs-slider { background-color: rgba(179, 158, 213, 0.2); }
.panel-content[data-page-color="violet"] .vjs-progress-control .vjs-slider { background-color: rgba(136, 100, 176, 0.2); }
.panel-content[data-page-color="teal"] .vjs-progress-control .vjs-slider { background-color: rgba(0, 137, 123, 0.2); }
.panel-content[data-page-color="warm-gray"] .vjs-progress-control .vjs-slider { background-color: rgba(138, 130, 120, 0.2); }
.panel-content[data-page-color="cool-gray"] .vjs-progress-control .vjs-slider { background-color: rgba(120, 128, 138, 0.2); }
.panel-content[data-page-color="sage"] .vjs-progress-control .vjs-slider { background-color: rgba(143, 161, 134, 0.2); }
.panel-content[data-page-color="green"] .vjs-progress-control .vjs-slider { background-color: rgba(85, 150, 85, 0.2); }
.panel-content[data-page-color="grass"] .vjs-progress-control .vjs-slider { background-color: rgba(96, 153, 54, 0.2); }
.panel-content[data-page-color="olive"] .vjs-progress-control .vjs-slider { background-color: rgba(128, 128, 0, 0.2); }

/* Time tooltip on play progress */
.md-hls-video .vjs-progress-control .vjs-time-tooltip {
  background-color: #0a0a0a;
  color: rgba(255, 249, 240, 0.85);
}

/* Mouse display tooltip - light background, dark grey text */
.md-hls-video .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip {
  background-color: rgba(255, 249, 240, 0.85);
  color: #0a0a0a;
}

/* Buffer bar - body text color at low opacity */
.md-hls-video .vjs-load-progress,
.md-hls-video .vjs-load-progress div {
  background: rgba(255, 249, 240, 0.2);
}

/* Sprite thumbnail popup - fix size to match actual thumbnails */
/* Only applies to videos with sprite thumbnails configured (data-thumb-vtt attribute) */
.md-hls-video[data-thumb-vtt] .vjs-mouse-display .vjs-time-tooltip {
  width: 160px !important;
  height: 90px !important;
}

/* Custom quality selector */
.md-hls-video .vjs-quality-selector .vjs-icon-placeholder::before {
  content: '\f114'; /* cog/gear icon from Video.js font */
  font-family: 'VideoJS';
}

.md-hls-video .vjs-quality-selector .vjs-menu {
  width: 6em;
}

.md-hls-video .vjs-quality-selector .vjs-menu-item {
  text-transform: none;
  font-size: 0.9em;
}

.md-hls-video .vjs-quality-selector .vjs-menu-item.vjs-selected {
  background-color: rgba(255, 249, 240, 0.2);
}

/* HLS Video Gallery Block */
.md-hls-video-gallery {
  margin: 1.5rem 0;
}

.md-hls-video-gallery-player {
  margin-bottom: 1rem;
}

.md-hls-video-gallery-player .md-hls-video {
  margin: 0;
}

.md-hls-video-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
}

.md-hls-video-gallery-thumb {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.2s ease;
  opacity: 0.2;
  font-family: inherit;
  font-size: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

.md-hls-video-gallery-thumb:hover {
  opacity: 0.5;
}

.md-hls-video-gallery-thumb.active {
  opacity: 1;
}

.md-hls-video-gallery-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin: 0;
}

.md-hls-video-gallery-thumb-caption {
  display: block;
  padding: 0.4rem 0;
  color: rgba(255, 249, 240, 0.6);
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-hls-video-gallery-thumb.active .md-hls-video-gallery-thumb-caption {
  color: rgba(255, 249, 240, 0.85);
}

.md-hls-video-gallery-thumb-img {
  position: relative;
}

.md-hls-video-gallery-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(4, 4, 4, 0.5);
  border-radius: 5px;
  color: rgba(255, 249, 240, 0.85);
  width: 3.2em;
  height: 2.6em;
  padding: 0.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background 0.2s ease;
}

.md-hls-video-gallery-thumb:hover .md-hls-video-gallery-thumb-play,
.md-hls-video-gallery-thumb:hover .md-hls-video-gallery-thumb-active {
  background: rgba(4, 4, 4, 0.9);
}

.md-hls-video-gallery-thumb-active {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(4, 4, 4, 0.9);
  border-radius: 5px;
  color: rgba(255, 249, 240, 0.85);
  width: 3.2em;
  height: 2.6em;
  padding: 0.7em;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background 0.2s ease;
}

.md-hls-video-gallery-thumb.active .md-hls-video-gallery-thumb-play {
  display: none;
}

.md-hls-video-gallery-thumb.active .md-hls-video-gallery-thumb-active {
  display: flex;
}

.md-hls-video-gallery-thumb-active svg {
  width: 0.5em;
  height: 0.5em;
}

.md-hls-video-gallery-thumb-play svg {
  width: 1em;
  height: 1em;
}

/* Frontmatter color element (hidden, only used for data attribute) */
.md-frontmatter-color {
  display: none;
}

/* Meta Block (project metadata) */
.md-meta {
  margin: 1rem 0 2rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1rem;
  line-height: 1.6;
}

/* Empty meta block (only had color, no visible items) */
.md-meta-empty {
  display: none;
}

.md-meta-item {
  white-space: nowrap;
  color: rgba(255, 249, 240, 0.85);
}


.md-meta-label {
  opacity: 0.7;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 4, 0.97);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: rgba(255, 249, 240, 0.85);
  font-size: 2.5rem;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  transition: color 0.2s ease;
}

.lightbox-close:hover {
  color: rgba(255, 249, 240, 0.5);
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 249, 240, 0.85);
  font-size: 3rem;
  cursor: pointer;
  padding: 1rem;
  line-height: 1;
  transition: color 0.2s ease;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  color: rgba(255, 249, 240, 0.5);
}

.lightbox-prev {
  left: 1rem;
}

.lightbox-next {
  right: 1rem;
}

.lightbox-prev:disabled,
.lightbox-next:disabled {
  color: rgba(255, 249, 240, 0.2);
  cursor: default;
}

.lightbox-caption {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: rgba(255, 249, 240, 0.6);
  font-size: 0.95rem;
  max-width: 80%;
}

.lightbox-caption:empty {
  display: none;
}

.lightbox-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 249, 240, 0.4);
  font-size: 0.85rem;
}

/* Hide non-main thumbnails when panel is open (desktop) */
body.panel-open .thumb:not([data-main]) {
  display: none;
}

/* Gallery fade transitions for smooth close */
.gallery.fading-out .thumb {
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.gallery.fading-in .thumb {
  animation: galleryFadeIn 0.4s ease forwards;
}

@keyframes galleryFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* Desktop: tighter spacing between header and gallery */
@media (min-width: 769px) {
  .header {
    padding-bottom: 0.5rem;
  }

  /* More spacing when panel is open */
  body.panel-open .header {
    padding-bottom: 1rem;
  }

  .md-meta-item {
    white-space: normal;
    word-break: break-word;
  }

}

/* Disable hover effects on touch devices (hover: none detects actual device capability) */
@media (hover: none) {
  /* Disable thumbnail hover opacity fading */
  .gallery.has-hover .thumb.visible {
    opacity: 1;
  }

  .gallery.has-hover .thumb.visible.highlighted {
    opacity: 1;
  }

  .gallery.has-hover .thumb.highlighted img {
    transform: none;
  }

  /* Disable filter button hover */
  .filter-btn:hover {
    color: rgba(255, 249, 240, 0.4);
  }

  .filter-btn.filter-highlighted {
    color: rgba(255, 249, 240, 0.4);
  }

  .filter-btn.filter-dimmed {
    opacity: 1;
  }

  /* Disable gallery image hover in panel */
  .md-gallery figure:hover img {
    opacity: 1;
  }

  .md-gallery figure:hover figcaption {
    color: rgba(255, 249, 240, 0.85);
  }
}

/* Responsive */
@media (max-width: 768px) {
  /* Hide category filters on mobile */
  .filters {
    display: none;
  }

  /* Stack meta items vertically on mobile */
  .md-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .md-meta-item {
    white-space: normal;
    word-break: break-word;
  }

  /* 2 columns on mobile */
  .gallery {
    grid-template-columns: repeat(1, 1fr);
  }

  /* Hide non-main thumbnails on mobile */
  .thumb:not([data-main]) {
    display: none;
  }

  /* On mobile, panel takes full width and scrolls */
  .panel {
    left: 0;
    width: 100%;
    right: 0;
    overflow-y: auto;
    transform: translateX(100%);
  }

  /* Hide main content and footer on mobile when panel open */
  body.panel-open .main-content,
  body.panel-open .footer {
    display: none;
  }

  /* Panel content doesn't need its own scroll on mobile */
  .panel-content {
    padding: 1.5rem;
    padding-top: 14px;
    overflow-y: visible;
    min-height: auto;
    flex: none;
  }

  /* Show mobile header at top of panel */
  .panel-mobile-header {
    display: block;
    padding: 1rem 1.5rem;
    padding-bottom: 0;
  }

  .panel-mobile-header .logo {
    font-size: inherit;
    font-weight: 400;
    letter-spacing: 0.05em;
  }

  /* Hide panel footer - using toolbar instead */
  .panel-footer {
    display: none;
  }

  /* Toolbar on mobile - needs to be sticky since panel scrolls */
  .panel-toolbar {
    position: sticky;
    bottom: 0;
    background: #040404;
  }

  /* Show center content on mobile */
  .panel-toolbar-center {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 1.1rem;
    color: rgba(255, 249, 240, 0.5);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .panel-toolbar-center:hover {
    color: rgba(255, 249, 240, 0.85);
  }

  .panel-toolbar-name {
    font-size: inherit;
    letter-spacing: 0.03em;
  }

  .panel-toolbar-center i {
    font-size: 0.9rem;
  }

  h1 {
    display:block;
    max-width: 94%;
  }
}