/* BELEK digital prototype. Interface styles. v0.1.0 */

:root {
  --ink: #ececea;
  --ink-dim: #a9a9a4;
  --ink-faint: #6b6b66;
  --ground: #0c0c0c;
  --ground-2: #161615;
  --line: #3a3a37;
  --focus: #ffffff;
  --node: #1d1d1b;
  --node-loaded: #ececea;
  --font: Futura, "Futura PT", "Century Gothic", "Avenir Next", Avenir, Jost, "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --max: 68rem;
  --measure: 38rem;
  --t: 240ms;
}

* { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: 0; top: 0; padding: .5rem 1rem; background: var(--ink); color: var(--ground); transform: translateY(-120%); }
.skip:focus { transform: none; z-index: 100; }

.btn {
  background: transparent; border: 1px solid var(--ink); border-radius: 0; padding: .7rem 1.4rem;
  letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; cursor: pointer; min-height: 44px;
  transition: background var(--t), color var(--t);
}
.btn:hover { background: var(--ink); color: var(--ground); }
.btn--enter { background: var(--ink); color: var(--ground); }
.btn--enter:hover { background: transparent; color: var(--ink); }
.btn--small { padding: .35rem .8rem; font-size: .7rem; min-height: 36px; border-color: var(--line); }
.btn--small:hover { border-color: var(--ink); }
.btn[aria-pressed="true"] { border-color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }

/* Entry */
.entry { position: relative; min-height: 100dvh; display: grid; place-items: end start; overflow: hidden; }
.entry__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 900ms ease; }
.entry__img.is-ready { opacity: .78; }
.entry__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,12,.15) 0%, rgba(12,12,12,.35) 55%, rgba(12,12,12,.92) 100%); }
.entry__body { position: relative; padding: clamp(1.25rem, 4vw, 3rem); max-width: 40rem; width: 100%; }
.entry__artist { margin: 0 0 .25rem; letter-spacing: .3em; text-transform: uppercase; font-size: .75rem; color: var(--ink-dim); }
.entry__title { margin: 0; font-weight: 500; letter-spacing: .18em; font-size: clamp(2.6rem, 9vw, 5.5rem); line-height: 1; }
.entry__line { margin: .6rem 0 1.6rem; color: var(--ink-dim); font-size: .95rem; }
.entry__controls { display: flex; gap: .75rem; flex-wrap: wrap; }
.entry__hint { color: var(--ink-faint); font-size: .8rem; margin: 1rem 0 0; }
.entry__note { color: var(--ink-dim); font-size: .8rem; margin: .4rem 0 0; min-height: 1.2em; }

/* Bar */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .6rem clamp(.75rem, 3vw, 2rem); background: rgba(12,12,12,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.bar__brand { letter-spacing: .25em; text-decoration: none; font-weight: 500; }
.bar__nav { display: flex; gap: .25rem; }
.bar__link { text-decoration: none; padding: .35rem .6rem; letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; color: var(--ink-dim); border-bottom: 1px solid transparent; }
.bar__link:hover { color: var(--ink); }
.bar__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.bar__tools { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

.main { min-height: calc(100dvh - 8rem); }
.main:focus { outline: none; }

/* Map */
.map { position: relative; height: calc(100dvh - 3.4rem); display: flex; flex-direction: column; }
.map__tools { display: flex; gap: .4rem; align-items: center; padding: .5rem clamp(.75rem, 3vw, 2rem); flex-wrap: wrap; }
.map__hint { color: var(--ink-faint); font-size: .75rem; margin-left: .5rem; }
.graph { flex: 1; width: 100%; min-height: 0; touch-action: none; cursor: grab; background: radial-gradient(ellipse at center, #121211 0%, var(--ground) 70%); }
.graph.is-dragging { cursor: grabbing; }
.graph text { font-family: var(--font); fill: var(--ink); pointer-events: none; }
.graph .edge { stroke: var(--line); stroke-width: 1; fill: none; }
.graph .edge--TITLE_MATCH { stroke-dasharray: 4 4; stroke: var(--ink-faint); }
.graph .edge--SOURCE_STATED { stroke-dasharray: 1 3; stroke: var(--ink-dim); }
.graph .edge.is-active { stroke: var(--ink); stroke-width: 1.5; }
.graph .n { cursor: pointer; }
.graph .n circle, .graph .n rect { fill: var(--node); stroke: var(--ink-dim); stroke-width: 1; transition: stroke var(--t), fill var(--t); }
.graph .n--root circle { fill: var(--ink); stroke: var(--ink); }
.graph .n--root text { fill: var(--ground); font-weight: 500; letter-spacing: .2em; }
.graph .n--hub circle { stroke: var(--ink); }
.graph .n--hub text { letter-spacing: .1em; text-transform: uppercase; }
.graph .n[data-loaded="LOADED"] circle { stroke: var(--ink); stroke-width: 1.6; }
.graph .n[data-loaded="NOT_LOADED"] circle { stroke-dasharray: 2 3; stroke: var(--ink-faint); }
.graph .n[data-loaded="NOT_LOADED"] text { fill: var(--ink-dim); }
.graph .n:hover circle, .graph .n:focus circle, .graph .n.is-active circle { fill: var(--ground-2); stroke: var(--focus); stroke-width: 2; }
.graph .n:focus { outline: none; }
.graph .n .lbl { font-size: 13px; text-anchor: middle; }
.graph .n .sub { font-size: 10px; fill: var(--ink-dim); text-anchor: middle; }
.graph .n circle.thumb { stroke: none; }
.graph .n circle.ring { fill: none !important; }
.graph .n[data-loaded="REGISTER"] circle.ring, .graph .n[data-loaded="LOADED"] circle.ring { stroke: var(--ink); }
.map__legend { display: flex; gap: 1.2rem; flex-wrap: wrap; padding: .5rem clamp(.75rem, 3vw, 2rem); font-size: .7rem; color: var(--ink-dim); border-top: 1px solid var(--line); }
.map__legend span { display: inline-flex; align-items: center; gap: .4rem; }
.map__legend i { display: inline-block; width: 22px; height: 0; border-top: 1px solid var(--ink-dim); }
.map__legend i.dash { border-top-style: dashed; }
.map__legend i.dot { border-top-style: dotted; }
.map__legend b { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--ink); }
.map__legend b.nl { border-style: dashed; border-color: var(--ink-faint); }

/* List */
.list { max-width: var(--max); margin: 0 auto; padding: 1.5rem clamp(.75rem, 3vw, 2rem) 3rem; }
.list h2 { font-weight: 500; letter-spacing: .15em; text-transform: uppercase; font-size: .8rem; color: var(--ink-dim); margin: 2rem 0 .6rem; border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
.list h2:first-child { margin-top: 0; }
.list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.list li a { display: grid; grid-template-columns: 3rem 1fr; gap: .8rem; align-items: center; padding: .5rem; text-decoration: none; border: 1px solid transparent; min-height: 44px; }
.list li a:hover { border-color: var(--line); }
.list .t { width: 3rem; height: 3rem; object-fit: cover; background: var(--node); filter: grayscale(1); }
.list .t--empty { border: 1px dashed var(--line); }
.list .name { display: block; }
.list .meta { display: block; font-size: .75rem; color: var(--ink-dim); }

/* Status badges */
.badge { display: inline-block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; padding: .1rem .4rem; border: 1px solid var(--line); color: var(--ink-dim); vertical-align: middle; margin-left: .4rem; }
.badge--LOADED { border-color: var(--ink); color: var(--ink); }
.badge--NOT_LOADED { border-style: dashed; }

/* Node view */
.node { max-width: var(--max); margin: 0 auto; padding: 1.5rem clamp(.75rem, 3vw, 2rem) 4rem; }
.node__back { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); min-height: 44px; }
.node__back:hover { color: var(--ink); }
.node__kicker { margin: 1.5rem 0 .2rem; font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-dim); }
.node__title { margin: 0; font-weight: 500; letter-spacing: .08em; font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.05; }
.node__sub { margin: .3rem 0 0; color: var(--ink-dim); }
.node__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 52em) { .node__grid--image { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.node__figure { margin: 0; }
.node__figure img { width: 100%; max-height: 78vh; object-fit: contain; object-position: left top; background: var(--ground-2); }
.node__figure figcaption { font-size: .72rem; color: var(--ink-faint); margin-top: .5rem; }
.caption { border-top: 1px solid var(--line); padding-top: 1rem; }
.caption dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
.caption dt { color: var(--ink-dim); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .15rem; }
.caption dd { margin: 0; }
.prose { max-width: var(--measure); font-family: var(--serif); font-size: 1.05rem; line-height: 1.65; }
.prose p { margin: 0 0 1.1em; }
.prose sup { font-family: var(--font); font-size: .65em; line-height: 0; }
.prose h3 { font-family: var(--font); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; font-size: .75rem; color: var(--ink-dim); margin: 2.5rem 0 .8rem; }
.notes { font-family: var(--font); font-size: .8rem; color: var(--ink-dim); line-height: 1.5; }
.notes p { margin: 0 0 .5em; }
.gap { border: 1px dashed var(--ink-faint); padding: .8rem 1rem; color: var(--ink-dim); font-size: .85rem; margin: 1rem 0; }
.gap strong { color: var(--ink); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; display: block; margin-bottom: .3rem; }
.related { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.related h3 { font-weight: 500; letter-spacing: .15em; text-transform: uppercase; font-size: .75rem; color: var(--ink-dim); margin: 0 0 .5rem; }
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.related li a { display: inline-block; padding: .45rem .8rem; border: 1px solid var(--line); text-decoration: none; font-size: .85rem; min-height: 44px; line-height: 1.9; }
.related li a:hover { border-color: var(--ink); }
.related .rel-status { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-left: .4rem; }
.node__status { margin-top: 2rem; font-size: .72rem; color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: .6rem; }
.node__status code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .7rem; }
.permalink { font-size: .75rem; color: var(--ink-dim); margin-top: .6rem; word-break: break-all; }
.permalink a { text-decoration-color: var(--ink-faint); }

.foot { max-width: var(--max); margin: 0 auto; padding: 1rem clamp(.75rem, 3vw, 2rem) 2rem; font-size: .7rem; color: var(--ink-faint); border-top: 1px solid var(--line); }

/* Motion */
@media (prefers-reduced-motion: reduce) {
  :root { --t: 0ms; }
  .entry__img { transition: none; }
}
html.reduce-motion { --t: 0ms; }
html.reduce-motion .entry__img { transition: none; }

@media (max-width: 40em) {
  .bar { gap: .5rem; padding: .45rem .75rem; }
  .bar__brand { font-size: .9rem; }
  .bar__link { padding: .3rem .4rem; font-size: .62rem; }
  .bar__tools { gap: .3rem; }
  .bar__tools .btn--small { padding: .25rem .45rem; font-size: .58rem; min-height: 32px; letter-spacing: .06em; }
  .map { height: calc(100dvh - 3.2rem); }
  .map__tools { padding: .4rem .75rem; }
  .map__hint { display: none; }
  .map__legend { gap: .6rem .9rem; font-size: .62rem; }
  .graph .n .lbl { font-size: 15px; }
  .graph .n .sub { font-size: 11px; }
}
.related--hub { margin-top: 0; border: 0; padding: 0; }
.node__title[tabindex="-1"]:focus { outline: none; }