/* BELEK-WEB-004. Astra design handoff, 2026-09-08.
 * NOT_INTEGRATED_NOT_BROWSER_TESTED. Load after css/belek.css.
 * Router contract: html[data-belek-view="entry|map|reader|list"].
 * No font files, remote imports, audio implementation, or hidden error states.
 */

html[data-belek-view] {
  --font: "Futura PT", Futura, "Century Gothic", "Avenir Next", Avenir,
    "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: var(--font);
  --measure: 62ch;
  --max: 78rem;
  font-family: var(--font);
}

html[data-belek-view="entry"],
html[data-belek-view="map"] {
  color-scheme: dark;
  --ground: #050505;
  --ground-2: #111111;
  --ink: #f1f1ee;
  --ink-dim: #b9b9b5;
  --ink-faint: #9c9c98;
  --line: #454543;
  --focus: #ffffff;
  --node: #0b0b0b;
}

html[data-belek-view="reader"],
html[data-belek-view="list"] {
  color-scheme: light;
  --ground: #ffffff;
  --ground-2: #f5f5f3;
  --ink: #161616;
  --ink-dim: #50504d;
  --ink-faint: #62625e;
  --line: #c5c5c0;
  --focus: #161616;
  --node: #f5f5f3;
}

html[data-belek-view] .btn,
html[data-belek-view] .bar__link,
html[data-belek-view] .bar__brand {
  min-width: 44px;
  min-height: 44px;
}
html[data-belek-view] .bar__link,
html[data-belek-view] .bar__brand {
  display: inline-flex;
  align-items: center;
}

/* Dark cover. Preserve every part of the supplied image composition. */
html[data-belek-view="entry"] .entry {
  min-height: max(40rem, 100svh);
  background: #000;
  grid-template-rows: max(20rem, calc(100svh - 18rem)) auto;
  place-items: stretch center;
  overflow: visible;
}
html[data-belek-view="entry"] .entry__img {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  background: #000;
  filter: brightness(.62);
}
html[data-belek-view="entry"] .entry__img.is-ready { opacity: 1; }
html[data-belek-view="entry"] .entry__veil {
  background: linear-gradient(180deg, rgba(0,0,0,.08) 35%, rgba(0,0,0,.75) 100%);
}
html[data-belek-view="entry"] .entry__body {
  grid-area: 2 / 1;
  max-width: 60rem;
  padding: 1.5rem max(1.25rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(1.25rem, env(safe-area-inset-left));
  text-align: center;
}
html[data-belek-view="entry"] .entry__artist:empty { display: none; }
html[data-belek-view="entry"] .entry__title {
  font-weight: 300;
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: .23em;
  padding-left: .23em;
  text-transform: uppercase;
}
html[data-belek-view="entry"] .entry__line {
  margin: 1.2rem 0 1.6rem;
  font-size: clamp(.82rem, 1.35vw, 1rem);
  font-weight: 300;
  letter-spacing: .16em;
  line-height: 1.6;
}
html[data-belek-view="entry"] .entry__controls {
  justify-content: center;
  align-items: center;
  gap: .7rem 1.5rem;
}
html[data-belek-view="entry"] .btn--enter,
html[data-belek-view="entry"] .btn--enter:hover {
  background: transparent;
  color: var(--ink);
  border: 1px solid transparent;
  padding: .75rem 1rem;
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: .25em;
}
html[data-belek-view="entry"] .btn--enter:hover {
  text-decoration: underline;
  text-underline-offset: .5em;
  text-decoration-thickness: 1px;
}
html[data-belek-view="entry"] .btn--sound { border-color: var(--line); }
html[data-belek-view="entry"] .entry__hint,
html[data-belek-view="entry"] .entry__note {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--ink-dim);
  font-size: .8rem;
}

/* Quiet map. Diagnostic visibility is a render/config responsibility. */
html[data-belek-view] .bar {
  background: var(--ground);
  backdrop-filter: none;
  border-bottom-color: var(--line);
  flex-wrap: wrap;
}
html[data-belek-view] .bar__brand { font-weight: 300; }
html[data-belek-view="map"] .graph { background: var(--ground); }
html[data-belek-view="map"] .graph .n--root circle {
  fill: var(--ground);
  stroke: var(--ink-dim);
}
html[data-belek-view="map"] .graph .n--root text {
  fill: var(--ink);
  font-weight: 300;
}
html[data-belek-view="map"] .graph .n--hub text { font-weight: 400; }
html[data-belek-view="map"] .map__hint { color: var(--ink-dim); }

/* Reading pages use the catalogue's white space and sans serif hierarchy. */
html[data-belek-view="reader"] .node,
html[data-belek-view="list"] .list {
  padding: clamp(1.5rem, 4vw, 4rem) clamp(1.25rem, 5vw, 4rem) 5rem;
}
html[data-belek-view="reader"] .node__kicker {
  margin-top: 2.5rem;
  font-size: .75rem;
  letter-spacing: .16em;
}
html[data-belek-view="reader"] .node__title {
  max-width: 24ch;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: .035em;
  overflow-wrap: anywhere;
}
html[data-belek-view="reader"] .node__grid {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  gap: 2.5rem;
}
html[data-belek-view="reader"] .node__grid > * { min-width: 0; }
html[data-belek-view="reader"] .prose {
  font-family: var(--font);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  max-width: 62ch;
  columns: auto;
  overflow-wrap: break-word;
}
html[data-belek-view="reader"] .prose p { margin: 0 0 1.15em; }
html[data-belek-view="reader"] .prose h3 {
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .12em;
}
html[data-belek-view="reader"] .notes {
  font-size: .9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
html[data-belek-view="reader"] .node__figure img {
  object-fit: contain;
  background: #fff;
}
html[data-belek-view="reader"] .node__figure figcaption {
  color: var(--ink-dim);
  font-size: .78rem;
  line-height: 1.5;
}
html[data-belek-view="reader"] .caption { font-size: 1rem; }
html[data-belek-view="reader"] .caption dl { grid-template-columns: minmax(5rem, auto) minmax(0, 1fr); }
html[data-belek-view="reader"] .caption dd { overflow-wrap: anywhere; }
html[data-belek-view="reader"] .related li a {
  border-width: 0 0 1px;
  padding-left: 0;
  padding-right: 1rem;
}
html[data-belek-view="list"] .list h2 {
  font-weight: 400;
  letter-spacing: .13em;
  padding-bottom: .8rem;
}
html[data-belek-view="list"] .list ul {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem 2rem;
}
html[data-belek-view="list"] .list li a {
  grid-template-columns: 5rem minmax(0, 1fr);
  padding: .8rem 0;
  border-width: 0 0 1px;
  border-color: var(--line);
}
html[data-belek-view="list"] .list .t {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
  background: #fff;
}
html[data-belek-view="list"] .list .name { overflow-wrap: anywhere; }
html[data-belek-view="list"] .list .meta { line-height: 1.5; }

@media (min-width: 64em) {
  html[data-belek-view="reader"] .node__grid--image {
    grid-template-columns: minmax(0, 1.5fr) minmax(15rem, .8fr);
    gap: clamp(2rem, 5vw, 5rem);
  }
}
@media (max-width: 40em) {
  html[data-belek-view] .bar__tools .btn--small { min-height: 44px; min-width: 44px; }
  html[data-belek-view="entry"] .entry__title { letter-spacing: .17em; padding-left: .17em; }
  html[data-belek-view="entry"] .entry__line { letter-spacing: .1em; }
  html[data-belek-view="reader"] .caption dl { gap: .4rem .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-belek-view] .entry__img { transition: none; }
}
html[data-belek-view].reduce-motion .entry__img { transition: none; }