* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}
a.detail-title-link, .bio-table a{
    font-weight: 500;
    color: #5a67d8;
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
    color: #333; 
    line-height: 1.6; 
}
.centered{
    margin-left: auto;
    margin-right: auto;
}
.nav-header {
    background: white;
    padding: 2rem;
    border-bottom: 1px solid #e0e0e0;
}

/* Only apply sticky behavior when JS is enabled */
.js-enabled .nav-header {
    position: sticky;
    top: 0;
    z-index: 100;
    will-change: transform; /* Optimize for animations */
}

.breadcrumb { 
    display: flex; 
    gap: 1rem; 
    align-items: center; 
    flex-wrap: wrap; 
}
.breadcrumb-item { 
    cursor: pointer; 
    padding: 0.5rem 1rem; 
    background: #f0f0f0; 
    border-radius: 20px; 
    text-decoration: none; 
    color: #333;
}
.breadcrumb-item:hover { 
    background: #333; 
    color: white; 
}
.breadcrumb-item.active { 
    background: #333; 
    color: white; 
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.breadcrumb-separator { 
    color: #999; 
}
.tag-cloud { 
    margin-top: 1rem; 
    display: flex; 
    gap: 0.5rem; 
    flex-wrap: wrap; 
}
.tag { 
    padding: 0.25rem 0.75rem; 
    background: #e8e8e8; 
    border-radius: 8px; 
    font-size: 0.875rem; 
    cursor: pointer; 
    text-decoration: none; 
    color: #333;
}
.tag:hover { 
    background: #666; 
    color: white; 
}
.grid-container { 
    padding: 2rem; 
    max-width: 1400px; 
    margin: 0 auto; 
}
.item-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 1.5rem; 
}
.item-card { 
    border-radius: 8px; 
    overflow: hidden; 
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    color: inherit; /* Prevent link from turning text blue */
    text-decoration: none; /* Remove link underline */
}
.item-card:hover .item-title {
    text-decoration: underline;
}

/* --- Static media cell (reserves space even if media is missing) --- */
:root {
    --cell-max-h: 300px; /* global height cap for cells */
    --letterbox: #00000000;   /* side bars for tall media */
}

.item-thumbnail { 
    position: relative;
}

/* The wrapper itself reserves space:
   - its width comes from the grid column
   - its height is width / --ar, clamped by max-block-size
*/
.media-aspect-wrapper {
    inline-size: 100%;
    /* aspect-ratio must NOT depend on missing vars—set --ar inline on each wrapper */
    aspect-ratio: var(--ar);
    max-block-size: var(--cell-max-h);
    border-radius: 8px;
    overflow: hidden;
    background: var(--letterbox);
    position: relative;
}

/* Media inside wrapper:
   - top aligned, centered horizontally
   - width shrinks if hitting the height cap
   - no cropping (contain → letterboxing for tall)
*/
.media-aspect-wrapper > img,
.media-aspect-wrapper > video {
    display: block;
    inline-size: min(100%, calc(var(--cell-max-h) * var(--ar)));
    block-size: auto;
    max-block-size: var(--cell-max-h);
    margin-inline: auto;
    object-fit: contain;
    object-position: top center;
    border-radius: 8px;
    /* max-width: 100%;
    max-height: 100%; */
}

.media-aspect-wrapper > iframe {
    /* iframes need to fill their wrapper completely */
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    border-radius: 8px;
}

/* For iframes, the wrapper needs special handling */
.media-aspect-wrapper:has(iframe) {
    /* Still use aspect ratio, but ensure proper sizing */
    width: 100%;
    max-width: min(888px, calc(100vw - 4rem));
    height: 500px;
    aspect-ratio: var(--ar);
    margin-inline: auto;
}

/* Optional: skeleton so empties look intentional if assets 404 */
.media-aspect-wrapper::after {
    content: "";
    position: absolute; 
    inset: 0;
    background: linear-gradient(90deg, transparent, #ffffff10, transparent);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
/* Hide skeleton when any media src is present (no JS) */
.media-aspect-wrapper:has(img[src], video[src], iframe[src])::after { 
    display: none; 
}
@keyframes shimmer { 
    to { background-position: -200% 0; } 
}

/* Detail view media - different max height */
.detail-view .media-aspect-wrapper {
    --cell-max-h: 500px; /* Override for detail view */
}

.item-content { 
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
}
.item-title { 
    font-size: 1.25rem; 
    font-weight: 600; 
    margin-bottom: 0.5rem; 
}
.item-meta { 
    color: #666; 
    font-size: 0.875rem; 
    margin-bottom: 0.75rem; 
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}
.year{
    border-width: thin;
	border-style: solid;
	justify-content: center;
    padding-left: 6px;
    padding-right: 6px;
    max-height: 3ch;
}
.item-description { 
    font-size: 1rem; 
    margin-bottom: 1rem; 
    color: #444; 
    flex-grow: 1;
}
.item-tags { 
    display: flex; 
    gap: 0.25rem; 
    flex-wrap: wrap; 
    margin-top: auto; 
}
.item-tag { 
    font-size: 0.75rem; 
    padding: 0.125rem 0.5rem; 
    background: #f0f0f0; 
    border-radius: 8px; 
}
.bio { 
    text-align: center; 
    max-width: 700px; 
    margin: 2rem auto; 
}
.bio h1 { 
    font-size: 2rem; 
    font-weight: 600; 
    margin-bottom: 0.5rem; 
}
.bio p { 
    font-size: 1.1rem; 
    color: #555; 
}
p {
    max-width: 60ch;
}
.detail-view { 
    background: white; 
    border-radius: 8px; 
    margin-bottom: 2rem; 
    overflow: hidden;
}

/* Horizontal scroll with snap for multiple items */
.detail-media.multi {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 1rem 0;
    margin: 0 0; /* Extend to viewport edges */
    padding-left: 2rem;
    padding-right: 2rem;
}

.detail-media.multi .media-item {
    flex: 0 0 auto; /* Responsive width */
    align-content:center;
    scroll-snap-align: start;
    max-width: 100%;
}

/* Single item display */
.detail-media.single .media-item {
    max-width: min(100%, 1000px);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Media item base styles */
.media-item {
    position: relative;
    border-radius: 8px;
}

/* Detail view adjustments for iframes */
.detail-view .media-aspect-wrapper:has(iframe) {
    max-height: 500px; /* Respect detail view height */
}

/* Remove special iframe handling - use same aspect ratio system */
/* .detail-view .media-aspect-wrapper:has(iframe) {
    height:auto;
    width: min(888px,calc(100vw - 6rem));
} */

/* Smooth load animation */
.media-aspect-wrapper img,
.media-aspect-wrapper video,
.media-aspect-wrapper iframe {
    opacity: 1;
    transition: opacity .25s ease-out;
}

/* Initial render snapshot (Chromium 117+, Safari 17+, FF 128+) */
@starting-style {
  .media-aspect-wrapper img,
  .media-aspect-wrapper video,
  .media-aspect-wrapper iframe { 
    opacity: 0; 
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .media-aspect-wrapper img,
  .media-aspect-wrapper video,
  .media-aspect-wrapper iframe { 
    transition: none; 
  }
}

/* Scroll indicators */
.detail-media.multi {
    /* Subtle shadows to indicate scrollability */
    background: 
        linear-gradient(to right, white 0%, transparent 2rem) left center,
        linear-gradient(to left, white 0%, transparent 2rem) right center;
    background-size: 3rem 100%;
    background-repeat: no-repeat;
    background-attachment: local, local;
}

/* Hide scrollbar but keep functionality */
.detail-media.multi {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #999 transparent;
}

.detail-media.multi::-webkit-scrollbar {
    height: 6px;
}

.detail-media.multi::-webkit-scrollbar-track {
    background: transparent;
}

.detail-media.multi::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 3px;
}

/* Media count indicator */
.media-indicator {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #666;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    
    
    /* Stronger snap on mobile */
    .detail-media.multi {
        scroll-snap-stop: always;
    }
}

.detail-content h1 { 
    font-size: 2.25rem; 
    font-weight: 600; 
    margin-bottom: 0.5rem; 
}
.detail-content .meta { 
    color: #666; 
    font-size: 1rem; 
    margin-bottom: 1.5rem; 
    display: flex;
    flex-direction: row;
}
.detail-content .description { 
    line-height: 1.7; 
}
.section-title { 
    font-size: 1.5rem; 
    font-weight: 500; 
    margin-bottom: 1rem; 
    border-top: 1px solid #e0e0e0; 
    padding-top: 2rem; 
}
.detail-media .media-item { 
    margin-bottom: 1rem; 
}
.detail-media .media-placeholder { 
    padding: 2rem; 
    text-align: center; 
}
.detail-title-link { 
    color: inherit; 
}

.filter-separator {
    margin: 0 10px;
    color: #555;
    align-self: center;
}
.tag.filter-tag {
    background-color: #e0e4f8ff;
    border-color: #555;
}
.tag.filter-tag:hover {
    background-color: #667eea;
    color: #111;
}
.tag.filter-tag.active {
    background-color: #667eea;
    color: #fff;
    border-color: #667eea;
}
/* MODIFIED: Style for the filtered breadcrumb item */
.breadcrumb-item.filtered-crumb {
    background-color: #5a67d8; /* Darker purple */
    color: #fff;
}

/* --- Bio Section & Links Table --- */
.bio-table {
    width: 100%; /* Make it fill its container */
    max-width: 60ch; /* But not exceed 60ch */
    margin: 2rem auto;
    border-collapse: collapse;
}

.bio-table td {
    padding: 0.5rem 0rem;
}

/* Define view transitions */
@supports (view-transition-name: none) {
  /* Transition the entire page by default */
  ::view-transition-old(root) {
    animation: fade-out 0.3s ease-out;
  }
  
  ::view-transition-new(root) {
    animation: fade-in 0.3s ease-out;
  }
  
  /* Specific transitions for nav elements */
  .nav-header {
    view-transition-name: nav-header;
  }
  
  /* Keep breadcrumb stable during transition */
  .breadcrumb {
    view-transition-name: breadcrumb;
  }
  
  /* Animate tag cloud separately */
  .tag-cloud {
    view-transition-name: tag-cloud;
  }
  
  /* Smooth grid transitions */
  .item-grid {
    view-transition-name: content-grid;
  }
  
  /* Custom animations */
  @keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* Slide effect for content */
  ::view-transition-old(content-grid) {
    animation: slide-out 0.3s ease-out;
  }
  
  ::view-transition-new(content-grid) {
    animation: slide-in 0.3s ease-out;
  }
  
  @keyframes slide-out {
    from { opacity: 1; }
    to {  opacity: 0; }
  }
  
  @keyframes slide-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* --- Mobile & Portrait Optimization --- */
@media (max-width: 768px) {
    /* Reduce header padding to save vertical space */
    .nav-header {
        padding: 1rem;
    }

    /* Tighten up the spacing for breadcrumbs and tags */
    .breadcrumb, .tag-cloud {
        gap: 0.5rem;
    }

    .tag-cloud {
        margin-top: 0.75rem; /* Adjust space between breadcrumbs and tags */
    }

    /* Make breadcrumb and tag buttons slightly smaller */
    .breadcrumb-item {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }

    /* Make grid items and fonts smaller */
    .item-grid {
        /* Allow cards to be a bit smaller on mobile */
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
    }

    .item-title {
        font-size: 1.1rem;
    }

    /* Adjust typography for detail pages */
    .detail-content h1 {
        font-size: 1.75rem;
    }

    .section-title {
        font-size: 1.25rem;
    }

    .bio-table {
        font-size: 0.9rem;
    }
    
    .bio-table td {
        padding: 0.5rem 0rem;
    }
}