/* BELEK digital prototype. v0.4.1 (file name kept from 0.3.0) additions on top of css/belek.css, Astra's css/catalogue-design.css (004) and css/white-theme.css (005), loaded last.
   Only what the integration needs: cover transition, white interior fade-in, sound status line, hit areas, availability notes, light-page details. */

body { background: var(--ground); color: var(--ink); }

/* Cover: the image goes dark before the map unfolds (BELEK_CONFIG.ENTRY_FADE). */
html[data-belek-view="entry"] .entry__img,
html[data-belek-view="entry"] .entry__body { transition: opacity 900ms ease; }
html[data-belek-view="entry"] .entry.is-leaving .entry__img,
html[data-belek-view="entry"] .entry.is-leaving .entry__body { opacity: 0; }
html.reduce-motion[data-belek-view="entry"] .entry__img,
html.reduce-motion[data-belek-view="entry"] .entry__body { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-belek-view="entry"] .entry__img, html[data-belek-view="entry"] .entry__body { transition: none; }
}
html[data-belek-view="entry"] .entry__img { filter: brightness(.9); }
html[data-belek-view="entry"] .entry__line { margin-bottom: .35rem; }
html[data-belek-view="entry"] .entry__line2 { margin: 0 0 1.6rem; font-size: clamp(.72rem, 1.1vw, .85rem); font-weight: 300; letter-spacing: .12em; color: var(--ink-dim); text-align: center; }
html[data-belek-view="entry"] .entry__line2:empty { display: none; }
html[data-belek-view="entry"] .entry__controls { margin-top: .5rem; }
html[data-belek-view="entry"] .btn--enter { min-width: 8rem; }
html[data-belek-view="entry"] .btn--enter:focus-visible { outline-offset: 6px; }
html[data-belek-view="entry"] .btn--sound { font-size: .68rem; letter-spacing: .14em; color: var(--ink-dim); text-decoration: none; border-color: var(--line); }
html[data-belek-view="entry"] .btn--sound[aria-pressed="true"] { text-decoration: none; border-color: var(--ink-faint); }
html[data-belek-view="entry"] .btn--sound:hover { color: var(--ground); background: var(--ink); }
html[data-belek-view="entry"] .btn--sound[aria-disabled="true"] { opacity: .6; cursor: default; }
html[data-belek-view="entry"] .entry__hint { margin-top: 1.2rem; color: var(--ink-faint); }
html[data-belek-view="entry"] .entry__note:empty { display: none; }

/* Interior: white surfaces fade in after the black cover (BELEK_CONFIG.ENTRY_FADE), no movement. */
.main.is-entering, .bar.is-entering { opacity: 0; }
.main, .bar { transition: opacity 600ms ease; }
html.reduce-motion .main, html.reduce-motion .bar { transition: none; }
@media (prefers-reduced-motion: reduce) { .main, .bar { transition: none; } }

/* Sound status line below the bar, visible on every view after entry. */
html[data-belek-view="entry"] .sound-status { display: none; }
.sound-status { margin: 0; padding: .5rem clamp(.75rem, 3vw, 2rem); font-size: .8rem; color: var(--ink-dim); background: var(--ground-2); border-bottom: 1px solid var(--line); }

/* Map: quiet chrome, bigger hit areas. */
html[data-belek-view="map"] .map__tools { border-bottom: 0; }
html[data-belek-view="map"] .graph .n circle.hit, html[data-belek-view="map"] .graph .n:is(:hover, :focus, .is-active) circle.hit { fill: transparent !important; stroke: none !important; pointer-events: all; }
html[data-belek-view="map"] .graph.is-unfolding .n { transition: none; }
html[data-belek-view="map"] .graph .n .lbl { font-weight: 400; }
html[data-belek-view="map"] .graph .n--hub .lbl { letter-spacing: .12em; }
html[data-belek-view="map"] .graph .n[data-loaded="NOT_LOADED"] .lbl { fill: var(--ink-faint); }
html[data-belek-view="map"] .graph .n circle.thumb { stroke: none; }
html[data-belek-view="map"] .graph .edge { stroke-width: .8; }
html[data-belek-view="map"] .graph .edge.is-active { stroke-width: 1.4; }
html[data-belek-view="map"] .map__hint { color: var(--ink-dim); }
html[data-belek-view="map"] .sound-status { background: var(--ground); }

/* Reader and list: light catalogue pages. */
html[data-belek-view="reader"] .bar, html[data-belek-view="list"] .bar { background: var(--ground); }
html[data-belek-view="reader"] .node__back { color: var(--ink-dim); }
html[data-belek-view="reader"] .node__sub { color: var(--ink-dim); font-weight: 300; }
html[data-belek-view="reader"] .node__figure img { max-height: 80vh; object-fit: contain; object-position: left top; }
html[data-belek-view="reader"] .caption { border-top-color: var(--line); }
html[data-belek-view="reader"] .caption dd { font-weight: 300; }
html[data-belek-view="reader"] .prose { font-weight: 300; }
html[data-belek-view="reader"] .prose em { font-style: italic; }
html[data-belek-view="reader"] .notes { color: var(--ink-dim); font-weight: 300; }
html[data-belek-view="reader"] .gap { border-color: var(--line); color: var(--ink-dim); font-weight: 300; }
html[data-belek-view="reader"] .gap strong { color: var(--ink); }
html[data-belek-view="reader"] .gap--note { border-style: solid; }
html[data-belek-view="reader"] .gap--editorial { border-color: var(--ink-faint); border-style: dashed; }
html[data-belek-view="reader"] .related li a { border-color: var(--line); font-weight: 300; }
html[data-belek-view="reader"] .related li a:hover { border-color: var(--ink); }
html[data-belek-view="reader"] .related--hub ul { flex-direction: column; gap: 0; }
html[data-belek-view="reader"] .related--hub li a { display: block; padding: .6rem 0; font-size: 1.05rem; }
html[data-belek-view="reader"] .rel-status { color: var(--ink-faint); }
html[data-belek-view="reader"] .permalink, html[data-belek-view="reader"] .foot { color: var(--ink-faint); }
html[data-belek-view="reader"] .permalink a { color: var(--ink-dim); }
html[data-belek-view="list"] .list .meta--soon { color: var(--ink-faint); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
html[data-belek-view="list"] .list .t--empty { border-color: var(--line); background: var(--ground); }
html[data-belek-view="list"] .list .t { filter: none; }
html[data-belek-view="list"] .list li a { border-color: var(--line); }
html[data-belek-view="list"] .list li a:hover { border-color: var(--ink); }
html[data-belek-view="list"] .list .name { font-weight: 400; }
html[data-belek-view="list"] .list .meta { font-weight: 300; }
html[data-belek-view="reader"] .foot, html[data-belek-view="list"] .foot { border-top-color: var(--line); }

/* Buttons keep 44 px targets everywhere; on white pages hover and pressed states stay white with a dark border (005). */
html[data-belek-view] .btn--small { border-color: var(--line); color: var(--ink); }
html[data-belek-view="entry"] .btn--small:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }

/* v0.4.0: colour photographs for the works, black and white sets for the Visual Lexicon */
.node__media { min-width: 0; }
.gallery { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
/* v0.4.1: views are buttons that switch the photograph in place */
.gallery__item { display: block; width: 6.5rem; height: 6.5rem; padding: 0; border: 1px solid var(--line); background: transparent; cursor: pointer; border-radius: 0; opacity: .8; transition: opacity var(--t), border-color var(--t); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__item:hover { border-color: var(--ink); opacity: 1; }
.gallery__item.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); opacity: 1; cursor: default; }
.gallery__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gallery__hint { font-size: .72rem; color: var(--ink-dim); margin: .5rem 0 0; }
html[data-belek-view="reader"] .node__figure img.is-switchable { cursor: pointer; }
html[data-belek-view="reader"] .node__figure figcaption:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .gallery__item { transition: none; } }
.bwset { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; max-width: 62rem; }
.bwset__item { margin: 0; }
.bwset__item img { width: 100%; max-height: 70vh; object-fit: contain; object-position: left top; background: var(--ground); filter: grayscale(1); }
.bwset__item figcaption { margin-top: .5rem; font-size: .8rem; letter-spacing: .06em; color: var(--ink-dim); }
.bwset__item a { display: block; }
html[data-belek-view="reader"] .node__figure img { filter: none; }
html[data-belek-view="list"] .list .t { filter: none; }
html[data-belek-view="map"] .graph .n--lexicon circle.thumb { filter: grayscale(1); }