/* ==========================================================================
   Dual navigation: the top bar (identity + global pages) and the left
   collection index beside the canvas. Fine dividers, quiet type, one
   restrained active marker; the canvas belongs to the work.
   ========================================================================== */

:root { --dn-side: 200px; --dn-top: 0px; }

/* Canvas: index column + work column */
.dn-dual .art-main { display: grid; grid-template-columns: var(--dn-side) minmax(0, 1fr); gap: 0 clamp(28px, 3.4vw, 64px); max-width: var(--art-max); margin: 0 auto; padding: 0 var(--art-gutter); }
.dn-dual .art-main > .dn-index { grid-column: 1; grid-row: 1 / span 40; }
.dn-dual .art-main > :not(.dn-index) { grid-column: 2; min-width: 0; }
.dn-dual .edith-content { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.dn-dual .edith-content .alignfull { width: 100%; margin-left: 0; margin-right: 0; }

/* The index */
.dn-index { padding-top: clamp(28px, 5vw, 64px); font-size: 13px; }
.dn-index__inner { position: sticky; top: calc(var(--dn-top) + 24px); max-height: calc(100vh - var(--dn-top) - 48px); overflow-y: auto; padding-right: .4rem; scrollbar-width: none; }
.admin-bar .dn-index__inner { top: calc(var(--dn-top) + 56px); }
.dn-index__inner { position: sticky; }
.dn-index__open { display: none; }
.dn-index__group { position: relative; margin-bottom: 1.6rem; }
.dn-index__heading, .dn-index__toggle { display: block; width: 100%; margin: 0 0 .5rem; padding: 0; border: 0; background: none; text-align: left; font: 400 10px/1.4 var(--art-meta-font); letter-spacing: .12em; text-transform: uppercase; color: var(--art-muted); }
.dn-index__toggle::after { content: "−"; float: right; }
.dn-index__toggle.collapsed::after { content: "+"; }
.dn-index__list, .dn-index__sub { margin: 0; padding: 0; list-style: none; }
.dn-index__link { position: relative; display: flex; justify-content: space-between; gap: .6rem; padding: .22rem 0 .22rem .8rem; color: var(--art-text); text-decoration: none; line-height: 1.3; opacity: .72; transition: opacity .25s ease; }
.dn-index__link:hover, .dn-index__link.is-active { opacity: 1; }
.dn-index__meta { flex: 0 0 auto; font: 400 10px/1.6 var(--art-meta-font); color: var(--art-muted); }
.dn-index__sub { margin: .2rem 0 .5rem .8rem; padding-left: .7rem; border-left: 1px solid var(--art-accent-2); }
.dn-index__sub a { display: block; padding: .12rem 0; font-size: 12px; color: var(--art-muted); text-decoration: none; }
.dn-index__sub a:hover { color: var(--art-text); }
.dn-index__span { margin: 2rem 0 0; font: 400 10px var(--art-meta-font); letter-spacing: .1em; color: var(--art-muted); }
/* One marker that glides to the active entry (positioned by dual.js) */
.dn-index__marker { position: absolute; left: 0; top: 0; width: 2px; height: 0; background: var(--art-accent); opacity: 0; transition: top .35s cubic-bezier(.2, .7, .2, 1), height .35s cubic-bezier(.2, .7, .2, 1), opacity .3s; pointer-events: none; z-index: 1; }
.dn-index__marker.is-on { opacity: 1; }
.dn-index__inner { position: sticky; }
.dn-index .dn-index__inner { isolation: isolate; }

@media (max-width: 991.98px) {
    .dn-dual .art-main { grid-template-columns: minmax(0, 1fr); }
    .dn-dual .art-main > .dn-index, .dn-dual .art-main > :not(.dn-index) { grid-column: 1; grid-row: auto; }
    .dn-index { padding-top: 1rem; }
    .dn-index__open { display: flex; justify-content: space-between; width: 100%; padding: .7rem 0; border: 0; border-top: 1px solid var(--art-accent-2); border-bottom: 1px solid var(--art-accent-2); background: none; color: var(--art-text); font: 400 11px var(--art-meta-font); letter-spacing: .12em; text-transform: uppercase; }
    .dn-index__open::after { content: "+"; }
    .dn-index__open[aria-expanded="true"]::after { content: "−"; }
    .dn-index__inner { position: static; display: none; max-height: none; padding: 1rem 0 0; }
    .dn-index.is-open .dn-index__inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 1.4rem; }
    .dn-index__marker { display: none; }
}

/* Mixed collection: films and stills keep their own proportions */
.dn-filters { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0 0 1.6rem; }
.dn-chip { font: 400 11px var(--art-meta-font); letter-spacing: .08em; text-transform: uppercase; color: var(--art-muted); text-decoration: none; padding-bottom: .15rem; border-bottom: 1px solid transparent; }
.dn-chip span { opacity: .6; }
.dn-chip:hover { color: var(--art-text); }
.dn-chip.is-active { color: var(--art-text); border-bottom-color: var(--art-accent); }
.dn-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: clamp(36px, 5vw, 72px) clamp(16px, 2.2vw, 32px); align-items: start; margin: 0; padding: 0; list-style: none; }
.dn-item { transition: opacity .25s ease, transform .25s ease; }
.dn-item--film { grid-column: span 7; }
.dn-item--film:nth-child(4n+4) { grid-column: span 8; }
.dn-item--landscape { grid-column: span 5; }
.dn-item--square { grid-column: span 4; }
.dn-item--portrait { grid-column: span 3; }
.dn-item.is-filtered { display: none; }
.dn-item.is-leaving, .dn-item.is-entering { opacity: 0; transform: translateY(8px); }
.dn-item--note { grid-column: span 4; }
.dn-note { display: block; padding: 1.4rem 1.4rem 1.8rem; background: var(--art-surface); color: var(--art-text); text-decoration: none; }
.dn-note__text { font: italic 400 19px/1.45 var(--art-heading-font); }
.dn-note:hover .dn-note__text { text-decoration: underline; text-decoration-color: var(--art-accent); }
.dn-still { display: block; overflow: hidden; background: var(--art-surface); }
.dn-still__img { display: block; width: 100%; height: auto; transition: transform .7s var(--vf-ease); }
.dn-cap { padding-top: .7rem; }
.dn-cap p { margin: 0; }
.dn-cap__title { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dn-cap__meta { margin-top: .15rem !important; font: 400 11px/1.4 var(--art-meta-font); color: var(--art-muted); }
.dn-cap__meta span { color: var(--art-accent); margin-right: .3rem; }
@media (max-width: 767.98px) {
    .dn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Phone spans always win over a theme's desktop spans (a wider span would add zero-width columns). */
    .dn-grid > .dn-item { grid-column: span 1 !important; grid-row: auto !important; margin-top: 0 !important; }
    .dn-grid > .dn-item--film, .dn-grid > .dn-item--landscape, .dn-grid > .dn-item--note { grid-column: span 2 !important; }
}
@media (prefers-reduced-motion: reduce) { .dn-index__marker, .dn-item { transition: none; } }

/* The top bar stays global: the side navigation extras of the video layer are not used here. */
.dn-dual .vs-side-foot { display: none; }