/*
  CHAPTER IV / ARCHIVE FLOOR VISUAL LAYER
  Visual styling only. The user-requested stack width override is below;
  transforms and motion parameters remain in the original stylesheet.
*/

.chapter-four-archive-page.has-c4-archive-map {
  /* Randomised on load from the seven project colours in archive-map.js. */
  --c4-map-ground: var(--rainbow-blue);

  --c4-map-ink: var(--ink);
  --c4-map-ghost: rgba(23, 23, 22, .2);
  --c4-map-line: rgba(23, 23, 22, .58);
  overflow: hidden;
  color: var(--c4-map-ink);
  background: var(--c4-map-ground);
}

.chapter-four-archive-page.has-c4-archive-map[data-map-tone="dark"] {
  --c4-map-ink: #f4f3f5;
  --c4-map-ghost: rgba(244, 243, 245, .22);
  --c4-map-line: rgba(244, 243, 245, .56);
}

.has-c4-archive-map .c4-stack-archive {
  background: var(--c4-map-ground);
}

.has-c4-archive-map .chapter-header,
.has-c4-archive-map .chapter-index-footer {
  z-index: 80;
  color: var(--c4-map-ink);
  background: var(--c4-map-ground);
}

.has-c4-archive-map .chapter-header__back,
.has-c4-archive-map .chapter-header__title,
.has-c4-archive-map .chapter-header__level span,
.has-c4-archive-map .chapter-index-footer {
  color: inherit;
}

.has-c4-archive-map .chapter-header__level strong,
.has-c4-archive-map .chapter-one-archive-mode,
.has-c4-archive-map .index-introduction,
.has-c4-archive-map .c4-axis-label,
.has-c4-archive-map .c4-stack-instruction {
  color: var(--c4-map-ink);
}

.has-c4-archive-map .chapter-one-archive-mode,
.has-c4-archive-map .index-introduction,
.has-c4-archive-map .c4-stack-readout,
.has-c4-archive-map .chapter-header,
.has-c4-archive-map .chapter-index-footer {
  isolation: isolate;
}

.has-c4-archive-map .c4-stack-field {
  background: transparent;
}

.has-c4-archive-map .c4-stack-field::after {
  display: none;
}

.has-c4-archive-map .c4-stack-field__background {
  display: none;
}

.has-c4-archive-map .index-introduction {
  width: min(320px, 24vw);
}

.has-c4-archive-map .index-introduction h1 {
  max-width: 310px;
  font-size: clamp(30px, 3.3vw, 55px);
  font-weight: 600;
}

.has-c4-archive-map .index-introduction__subtitle {
  color: inherit;
  opacity: .58;
}

.has-c4-archive-map .c4-axis-label {
  z-index: 7;
  font-size: clamp(10px, 1.08vw, 18px);
  opacity: .46;
}

.has-c4-archive-map .c4-axis-label--top { top: 13%; }
.has-c4-archive-map .c4-axis-label--bottom { bottom: 9%; }

.c4-archive-map {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.c4-archive-map,
.c4-archive-map * {
  pointer-events: none !important;
}

.c4-map-monument {
  position: absolute;
  top: 35%;
  left: -2.6vw;
  width: 48vw;
  margin: 0;
  color: var(--c4-map-ghost);
  font-family: var(--font-display);
  font-size: clamp(94px, 13vw, 236px);
  font-weight: 600;
  line-height: .68;
  letter-spacing: -.08em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.c4-map-axis {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: 1px;
  background: var(--c4-map-line);
}

.c4-map-axis::before,
.c4-map-axis::after {
  content: "";
  position: absolute;
  left: -4px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--c4-map-line);
  border-radius: 50%;
}

.c4-map-axis::before { top: 7%; }
.c4-map-axis::after { bottom: 7%; }
.c4-map-axis--primary { left: 49.5%; }
.c4-map-axis--secondary { left: 72.5%; opacity: .42; }

.c4-map-floor-index {
  position: absolute;
  top: 53%;
  left: -1.4vw;
  z-index: 5;
  display: grid;
  width: 31vw;
  grid-template-columns: auto 1fr;
  align-items: end;
  color: var(--c4-map-ink);
  transform: translateY(-50%);
}

.c4-map-floor-index__chapter {
  align-self: start;
  margin: 2.4vw 0 0 1.8vw;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.5vw, 42px);
  font-weight: 600;
  line-height: 1;
}

.c4-map-floor-index strong {
  display: block;
  margin-left: -1.4vw;
  font-family: var(--font-display);
  font-size: clamp(190px, 28vw, 500px);
  font-weight: 600;
  line-height: .68;
  letter-spacing: -.085em;
  opacity: .2;
  transition: opacity 120ms linear;
}

.c4-map-floor-index strong.is-updating { opacity: 0; }

.c4-map-floor-index > span:last-child {
  position: absolute;
  bottom: -18px;
  left: 4.2vw;
  font-size: 7px;
  letter-spacing: .12em;
}

.c4-map-hint {
  position: absolute;
  z-index: 6;
  padding: 4px 6px;
  border: 1px solid var(--c4-map-line);
  color: var(--c4-map-ink);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 7px;
  line-height: 1;
  letter-spacing: .12em;
  white-space: nowrap;
}

.c4-map-hint--drag { top: 18%; right: 4%; }
.c4-map-hint--scroll { top: 48%; left: 1.2%; transform: rotate(-90deg); }
.c4-map-hint--hover { bottom: 13%; left: 28%; }
.c4-map-hint--click { right: 2.2%; bottom: 16%; transform: rotate(90deg); transform-origin: right bottom; }

.has-c4-archive-map .c4-stack-instruction {
  z-index: 18;
  bottom: 34px;
  opacity: .76;
}

.has-c4-archive-map .c4-stack-instruction span { opacity: .5; }

.has-c4-archive-map .c4-stack-readout {
  z-index: 82;
  border: 1px solid rgba(244, 243, 245, .14);
  border-radius: 0;
  color: var(--c4-map-ink);
  background: rgba(244, 243, 245, .05);
  -webkit-backdrop-filter: blur(12px) saturate(1.06);
  backdrop-filter: blur(12px) saturate(1.06);
  box-shadow:
    inset 0 1px 0 rgba(244, 243, 245, .12),
    0 5px 18px rgba(23, 23, 22, .025);
}

.has-c4-archive-map .c4-stack-readout h2 { font-weight: 600; }
.has-c4-archive-map .c4-stack-readout h2 { overflow-wrap: anywhere; }
.has-c4-archive-map .c4-stack-readout dt { color: currentColor; opacity: .56; }
.has-c4-archive-map .c4-stack-readout > span,
.has-c4-archive-map .c4-stack-readout a { color: currentColor; }

@media (max-width: 1100px) {
  .c4-map-monument { top: 33%; }
  .c4-map-floor-index { top: 56%; }
  .c4-map-hint--drag { top: 20%; }
}

@media (max-width: 900px) {
  .chapter-four-archive-page.has-c4-archive-map { overflow-y: auto; }
  .has-c4-archive-map .c4-stack-archive { background: var(--c4-map-ground); }
  .has-c4-archive-map .index-introduction { width: calc(100vw - 44px); }
  .has-c4-archive-map .index-introduction h1 { max-width: 70vw; }
  .c4-archive-map { min-height: 872px; }
  .c4-map-axis--primary { left: 50%; }
  .c4-map-axis--secondary { left: 82%; }
  .c4-map-monument {
    top: 28%;
    left: -4vw;
    width: 84vw;
    font-size: clamp(76px, 20vw, 160px);
  }
  .c4-map-floor-index { top: 49%; width: 48vw; }
  .c4-map-floor-index strong { font-size: clamp(160px, 41vw, 330px); }
  .c4-map-hint--drag { top: 29%; right: 14px; }
  .c4-map-hint--scroll { top: 55%; left: -20px; }
  .c4-map-hint--hover { bottom: 25%; left: 14px; }
  .c4-map-hint--click { right: 14px; bottom: 25%; }
}

@media (max-width: 560px) {
  .c4-map-monument { top: 25%; font-size: clamp(66px, 22vw, 122px); opacity: .72; }
  .c4-map-floor-index { top: 45%; left: -4vw; width: 62vw; }
  .c4-map-floor-index__chapter { margin-left: 4vw; }
  .c4-map-floor-index strong { font-size: 48vw; }
  .c4-map-floor-index > span:last-child { left: 8vw; }
  .c4-map-axis--secondary { display: none; }
  .c4-map-hint--drag { top: 32%; }
  .c4-map-hint--scroll { top: 57%; }
  .c4-map-hint--hover { bottom: 23%; }
  .c4-map-hint--click { bottom: 24%; }
  .has-c4-archive-map .c4-stack-readout { border-right: 0; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .c4-map-floor-index strong { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .has-c4-archive-map .c4-stack-readout { background: var(--paper); }
}

/* Reference-layout correction: all scene geometry remains owned by the original CSS. */
@media (min-width: 901px) {
  .has-c4-archive-map .index-introduction { width: 25vw; }
  .has-c4-archive-map .index-introduction h1 {
    font-size: clamp(26px, 2.5vw, 42px);
    max-width: 25vw;
  }
  .c4-map-monument {
    top: 39%;
    left: -2vw;
    width: 29vw;
    overflow: hidden;
    font-size: clamp(90px, 9vw, 165px);
    line-height: .9;
    opacity: .85;
  }
  .c4-map-floor-index { top: 73%; left: -2vw; width: 27vw; }
  .c4-map-floor-index strong { font-size: clamp(150px, 20vw, 330px); }
  .c4-map-floor-index__chapter { font-size: 20px; }
  .has-c4-archive-map .c4-stack-readout {
    right: 22px;
    width: min(220px, 16vw);
    padding: 10px;
  }
  .has-c4-archive-map .c4-stack-readout h2 {
    font-size: clamp(16px, 1.45vw, 23px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
  .c4-map-hint--drag { top: 18%; right: 2%; }
  .c4-map-hint--scroll { top: 52%; left: 1%; }
  .c4-map-hint--hover { bottom: 5%; left: 23%; }
  .c4-map-hint--click { right: 2%; bottom: 43%; transform: none; }
}
.has-c4-archive-map .c4-axis-label { display: none; }
.has-c4-archive-map .c4-stack-instruction { visibility: hidden; pointer-events: none; }
.c4-map-axis--primary { left: 32%; }
.c4-map-axis--secondary { left: 83%; opacity: .3; }
.c4-map-axis::before,
.c4-map-axis::after { display: none; }

/* Requested: uninterrupted background and a fuller publication stack. */
.has-c4-archive-map .c4-map-axis { display: none; }
.has-c4-archive-map .c4-layer-stack { width: min(54vw, 880px); }
@media (max-width: 900px) {
  .has-c4-archive-map .c4-layer-stack { width: min(90vw, 760px); }
}