.wide {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: none;
}
html[data-wide="on"] .wide {
  display: block;
}
html[data-wide="off"] .wide {
  display: none !important;
}

.wide-guides,
.wide-scale,
.wide-edge {
  position: absolute;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}

.wide-guides {
  inset: 0;
}
.wide-guides::before,
.wide-guides::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% - var(--wide-carve, 520px));
  background-image:
    repeating-linear-gradient(
      to right,
      var(--guide-major) 0 1px,
      transparent 1px 640px
    ),
    repeating-linear-gradient(
      to right,
      var(--guide-minor) 0 1px,
      transparent 1px 160px
    );
  background-attachment: fixed;
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.wide-guides::before { left: 0; }
.wide-guides::after { right: 0; }

.wide-hlines {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--guide-h) 0 1px,
    transparent 1px 160px
  );

  mask-image: linear-gradient(to right,
    #000 0,
    #000 calc(50% - var(--wide-carve, 520px)),
    transparent calc(50% - var(--wide-carve, 520px) + 24px),
    transparent calc(50% + var(--wide-carve, 520px) - 24px),
    #000 calc(50% + var(--wide-carve, 520px)),
    #000 100%);
  -webkit-mask-image: linear-gradient(to right,
    #000 0,
    #000 calc(50% - var(--wide-carve, 520px)),
    transparent calc(50% - var(--wide-carve, 520px) + 24px),
    transparent calc(50% + var(--wide-carve, 520px) - 24px),
    #000 calc(50% + var(--wide-carve, 520px)),
    #000 100%);
}

.wide-scale {
  left: 0;
  right: 0;
  top: 9.5vh;
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  color: var(--grey-strong);
  white-space: nowrap;
}
.wide-scale span {
  flex: 0 0 320px;
  padding-left: 5px;
}

.wide-scale {
  mask-image: linear-gradient(to right,
    #000 0,
    #000 calc(50% - var(--wide-carve, 520px)),
    transparent calc(50% - var(--wide-carve, 520px) + 16px),
    transparent calc(50% + var(--wide-carve, 520px) - 16px),
    #000 calc(50% + var(--wide-carve, 520px)),
    #000 100%);
  -webkit-mask-image: linear-gradient(to right,
    #000 0,
    #000 calc(50% - var(--wide-carve, 520px)),
    transparent calc(50% - var(--wide-carve, 520px) + 16px),
    transparent calc(50% + var(--wide-carve, 520px) - 16px),
    #000 calc(50% + var(--wide-carve, 520px)),
    #000 100%);
}

@media (min-width: 1200px) {
  html[data-wide="on"] #splash.phase-logo .wide-guides { opacity: 0.22; }
  html[data-wide="on"] #splash.phase-logo .wide-scale { opacity: 0.7; }
  html[data-wide="on"] #splash.phase-name .wide-hlines { opacity: 0.16; }

  html[data-wide="on"] #splash.phase-expand .wide-guides { opacity: 0.12; }
  html[data-wide="on"] #splash.phase-expand .wide-scale { opacity: 0.4; }
  html[data-wide="on"] #splash.phase-expand .wide-hlines { opacity: 0.085; }

  html[data-wide="on"] body.sp-logo .deco .wide-guides { opacity: 0.22; }
  html[data-wide="on"] body.sp-logo .deco .wide-scale { opacity: 0.7; }
  html[data-wide="on"] body.sp-name .deco .wide-guides { opacity: 0.22; }
  html[data-wide="on"] body.sp-name .deco .wide-scale { opacity: 0.7; }
  html[data-wide="on"] body.sp-name .deco .wide-hlines { opacity: 0.16; }
  html[data-wide="on"] body.sp-code .deco .wide-guides { opacity: 0.22; }
  html[data-wide="on"] body.sp-code .deco .wide-scale { opacity: 0.7; }
  html[data-wide="on"] body.sp-code .deco .wide-hlines { opacity: 0.16; }

  html[data-wide="on"] body.deco-on .deco .wide-guides { opacity: 0.12; }
  html[data-wide="on"] body.deco-on .deco .wide-scale { opacity: 0.4; }
  html[data-wide="on"] body.deco-on .deco .wide-hlines { opacity: 0.085; }
}

@media (min-width: 1200px) {
  html[data-wide="on"] .splash-rule { width: min(76vw, 1180px); }
}

.wide-edge {
  top: 18vh;
  height: 64vh;
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  font-family: var(--font-mono);
}
.wide-edge-l {
  left: clamp(30px, 3.4vw, 64px);
}
.wide-edge-r {
  right: clamp(30px, 3.4vw, 64px);
  flex-direction: row-reverse;
}

.we-rail {
  flex: none;
  width: 9px;
  display: flex;
  justify-content: center;
}
.we-rail i {
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--ink) 0 1px,
    transparent 1px 13px
  );
  opacity: 0.34;
}

.wide-edge-r .we-rail i {
  background-position: right top;
}

.we-marks {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.54rem;
  letter-spacing: 0.1em;
  color: var(--grey-strong);
}
.wide-edge-r .we-marks {
  text-align: right;
}

/* Two equal tapes wrap without resetting during navigation speed changes. */
.wide-edge.is-rolling .we-rail {
  overflow: hidden;
}
.wide-edge.is-rolling .we-rail i {
  flex: none;
  height: calc(100% + 13px);
}
.wide-edge.is-rolling .we-marks {
  position: relative;
  display: block;
  width: calc(4ch + 0.4em);
  height: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 7px, #000 calc(100% - 7px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7px, #000 calc(100% - 7px), transparent);
}
.we-mark-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.we-mark-loop {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  height: var(--edge-loop);
}
.we-mark-loop > span {
  align-self: start;
}

.we-vtext {
  flex: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  color: var(--grey-strong);
  opacity: 0.8;
  align-self: center;
}
.wide-edge-l .we-vtext {
  transform: rotate(180deg);
}

@media (min-width: 1400px) {
  html[data-wide="on"] #splash.phase-name .wide-edge { opacity: 1; }
  html[data-wide="on"] #splash.phase-expand .wide-edge { opacity: 0.42; }

  html[data-wide="on"] body.sp-name .deco .wide-edge,
  html[data-wide="on"] body.sp-code .deco .wide-edge { opacity: 1; }

  html[data-wide="on"] body.deco-on .deco .wide-edge { opacity: 0.42; }
}

@media (prefers-reduced-motion: reduce) {
  .wide-guides,
  .wide-hlines,
  .wide-scale,
  .wide-edge {
    transition: none !important;
  }

  html[data-wide="on"] .deco .wide-guides { opacity: 0.12 !important; }
  html[data-wide="on"] .deco .wide-scale { opacity: 0.4 !important; }
  html[data-wide="on"] .deco .wide-hlines { opacity: 0.085 !important; }
  html[data-wide="on"] .deco .wide-edge { opacity: 0.42 !important; }
}