/* Exact title-led art for established Installation, Vertical and Project pages. */

body[data-hj-established-title-art] .hj-install-signal {
  justify-content: flex-start;
  min-height: 430px;
  padding: 22px;
}

body[data-hj-established-title-art] .hj-install-signal-label {
  margin-bottom: 10px;
}

body[data-hj-established-title-art] .hj-install-title-plot {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  border: 1px solid var(--hj-install-accent-line);
  border-radius: 13px;
  background:
    linear-gradient(rgba(85, 220, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 220, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 42% 45%, var(--hj-install-accent-soft), transparent 48%),
    #05111e;
  background-size: 24px 24px, 24px 24px, auto, auto;
}

body[data-hj-established-title-art] .hj-title-art-frame {
  fill: rgba(4, 15, 26, .42);
  stroke: rgba(120, 210, 244, .14);
}

body[data-hj-established-title-art] .hj-title-artwork {
  color: var(--hj-install-accent);
  filter: drop-shadow(0 12px 10px rgba(0, 9, 19, .62));
}

body[data-hj-established-title-art] .hj-title-artwork :is(
  .pv-shell, .pv-screen, .pv-line, .pv-line--heavy, .pv-wave, .pv-accent-line,
  .pv-soft, .pv-solid, .pv-panel, .pv-target, .pv-detection, .pv-parking-bay,
  .pv-fountain-basin, .pv-water-fill, .pv-safety-fill, .pv-safety-panel,
  .pv-fill-secondary, .pv-label-line
) {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-hj-established-title-art] .hj-title-artwork :is(.pv-shell, .pv-solid) {
  fill: #0c2b40;
  stroke: var(--hj-install-accent);
  stroke-width: 2.5;
}

body[data-hj-established-title-art] .hj-title-artwork .pv-screen {
  fill: #0a2434;
  stroke: color-mix(in srgb, var(--hj-install-accent) 76%, white);
  stroke-width: 1.8;
}

body[data-hj-established-title-art] .hj-title-artwork .pv-panel {
  fill: rgba(6, 25, 39, .92);
  stroke: color-mix(in srgb, var(--hj-install-accent) 62%, transparent);
  stroke-width: 1.5;
}

body[data-hj-established-title-art] .hj-title-artwork :is(.pv-line, .pv-label-line) {
  fill: none;
  stroke: var(--hj-install-accent);
  stroke-width: 2;
}

body[data-hj-established-title-art] .hj-title-artwork .pv-line--heavy { stroke-width: 3.6; }
body[data-hj-established-title-art] .hj-title-artwork .pv-line--dash { stroke-dasharray: 6 6; }

body[data-hj-established-title-art] .hj-title-artwork .pv-accent-line {
  fill: none;
  stroke: #8eafff;
  stroke-width: 2.8;
}

body[data-hj-established-title-art] .hj-title-artwork .pv-wave {
  fill: none;
  stroke: #8eafff;
  stroke-width: 2.2;
  stroke-dasharray: 5 5;
}

body[data-hj-established-title-art] .hj-title-artwork .pv-soft {
  fill: rgba(142, 175, 255, .12);
  stroke: rgba(142, 175, 255, .62);
  stroke-width: 1.7;
}

body[data-hj-established-title-art] .hj-title-artwork :is(.pv-target, .pv-parking-bay, .pv-fountain-basin) {
  fill: rgba(85, 220, 255, .08);
  stroke: rgba(85, 220, 255, .66);
  stroke-width: 1.8;
}

body[data-hj-established-title-art] .hj-title-artwork .pv-detection {
  fill: rgba(85, 220, 255, .13);
  stroke: rgba(85, 220, 255, .5);
  stroke-width: 1.5;
}

body[data-hj-established-title-art] .hj-title-artwork :is(.pv-accent, .pv-dot, .pv-fill-secondary) {
  fill: #8eafff;
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

body[data-hj-established-title-art] .hj-title-artwork :is(.pv-water-fill, .pv-fence-wire) {
  fill: none;
  stroke: #8eafff;
  stroke-width: 2.4;
}

body[data-hj-established-title-art] .hj-title-artwork :is(.pv-safety-fill, .pv-safety-panel) {
  fill: rgba(31, 213, 132, .16);
  stroke: #52e699;
  stroke-width: 2;
}

body[data-hj-established-title-art] .hj-title-artwork .pv-label {
  fill: #d8f7ff;
  font: 800 18px/1.1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .055em;
}

body[data-hj-established-title-art] .hj-install-signal .pv-feature-rail {
  pointer-events: none;
}

body[data-hj-established-title-art] .hj-install-signal .pv-feature rect {
  fill: rgba(3, 16, 25, .88);
  stroke: color-mix(in srgb, var(--hj-install-accent) 48%, transparent);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

body[data-hj-established-title-art] .hj-install-signal .pv-feature-symbol {
  fill: none;
  stroke: color-mix(in srgb, var(--hj-install-accent) 74%, white);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

body[data-hj-established-title-art] .hj-install-signal .pv-feature text {
  fill: #e8f8ff;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
}

body[data-hj-established-title-art] .hj-title-artwork .pv-label--plate { font-size: 10px; }
body[data-hj-established-title-art] .hj-title-artwork :is(.pv-exit-person, .pv-exit-arrow) { fill: #bfffe0; }

body[data-hj-vertical-page="detail"][data-hj-established-title-art] .hj-vertical-title-plot,
body[data-hj-project-page="evidence-dossier"][data-hj-established-title-art] .hj-project-title-plot {
  position: absolute;
  inset: 48px 18px 82px;
  z-index: 1;
  display: block;
  width: calc(100% - 36px);
  height: calc(100% - 130px);
}

body[data-hj-project-page="evidence-dossier"][data-hj-established-title-art] .hj-project-title-plot {
  inset: 46px 18px 144px;
  width: calc(100% - 36px);
  height: calc(100% - 190px);
}

body[data-hj-vertical-page="detail"][data-hj-established-title-art] .hj-site-frame,
body[data-hj-project-page="evidence-dossier"][data-hj-established-title-art] .hj-site-frame {
  fill: rgba(4, 16, 28, .42);
  stroke: rgba(85, 220, 255, .15);
}

body[data-hj-vertical-page="detail"][data-hj-established-title-art] .hj-site-art :is(.hj-site-solid, .hj-site-panel, .hj-site-line, .hj-site-accent, .hj-site-node),
body[data-hj-project-page="evidence-dossier"][data-hj-established-title-art] .hj-site-art :is(.hj-site-solid, .hj-site-panel, .hj-site-line, .hj-site-accent, .hj-site-node) {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-hj-vertical-page="detail"][data-hj-established-title-art] .hj-site-solid,
body[data-hj-project-page="evidence-dossier"][data-hj-established-title-art] .hj-site-solid {
  fill: rgba(12, 43, 64, .88);
  stroke: rgba(85, 220, 255, .9);
  stroke-width: 2.2;
}

body[data-hj-vertical-page="detail"][data-hj-established-title-art] .hj-site-panel,
body[data-hj-project-page="evidence-dossier"][data-hj-established-title-art] .hj-site-panel {
  fill: rgba(7, 25, 39, .96);
  stroke: rgba(85, 220, 255, .56);
  stroke-width: 1.5;
}

body[data-hj-vertical-page="detail"][data-hj-established-title-art] .hj-site-line,
body[data-hj-project-page="evidence-dossier"][data-hj-established-title-art] .hj-site-line {
  fill: none;
  stroke: rgba(153, 222, 248, .72);
  stroke-width: 1.7;
}

body[data-hj-vertical-page="detail"][data-hj-established-title-art] .hj-site-accent,
body[data-hj-project-page="evidence-dossier"][data-hj-established-title-art] .hj-site-accent {
  fill: none;
  stroke: #8eafff;
  stroke-width: 2.3;
}

body[data-hj-vertical-page="detail"][data-hj-established-title-art] .hj-site-node,
body[data-hj-project-page="evidence-dossier"][data-hj-established-title-art] .hj-site-node {
  fill: #55dcff;
  stroke: #e6fbff;
  stroke-width: 1.2;
}

@media (max-width: 900px) {
  body[data-hj-established-title-art] .hj-install-signal { min-height: 0; }
}

@media (max-width: 640px) {
  body[data-hj-established-title-art] .hj-install-signal { padding: 16px; }
  body[data-hj-established-title-art] .hj-install-title-plot { margin-bottom: 10px; }
  body[data-hj-vertical-page="detail"][data-hj-established-title-art] .hj-vertical-title-plot {
    inset: 44px 12px 116px;
    width: calc(100% - 24px);
    height: calc(100% - 160px);
  }
  body[data-hj-project-page="evidence-dossier"][data-hj-established-title-art] .hj-project-title-plot {
    inset: 44px 12px 142px;
    width: calc(100% - 24px);
    height: calc(100% - 186px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-hj-established-title-art] .hj-title-artwork { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  body[data-hj-established-title-art] .hj-title-artwork * { fill: Canvas !important; stroke: CanvasText !important; }
}

@media print {
  body[data-hj-established-title-art] .hj-title-artwork { filter: none !important; }
  body[data-hj-established-title-art] .hj-install-title-plot { background: #fff !important; }
}