/* Temporary 3.0 site-state treatment. Remove this file and its markup classes at launch. */
.under-construction {
  position: relative;
}

.under-construction::before,
.under-construction::after {
  position: absolute;
  top: 50%;
  z-index: 55;
  pointer-events: none;
}

.under-construction::before {
  content: "";
  left: -3%;
  width: 106%;
  height: var(--construction-tape-height, 34px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: repeating-linear-gradient(135deg, #17140b 0 10px, #f2c94c 10px 25px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-50%) rotate(var(--construction-tape-angle, -3deg));
}

.under-construction::after {
  content: attr(data-construction-label);
  left: 50%;
  box-sizing: border-box;
  max-width: calc(100% - 16px);
  overflow: hidden;
  border: 1px solid #17140b;
  padding: 5px 10px;
  color: #17140b;
  background: #f2c94c;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font: 700 clamp(0.58rem, 0.9vw, 0.72rem)/1.1 "Share Tech Mono", "Courier New", monospace;
  letter-spacing: 0.08em;
  text-align: center;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(var(--construction-tape-angle, -3deg));
}

.under-construction--reel {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  --construction-tape-height: 38px;
  --construction-tape-angle: -3deg;
}

nav[aria-label="Main navigation"] > .nav-blog-link.under-construction--nav {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  appearance: none;
  border: 1px solid rgba(143, 216, 255, 0.74);
  border-radius: 5px;
  padding: 10px;
  color: #e9ffff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(29, 114, 255, 0.16), rgba(0, 12, 20, 0.42));
  font: inherit;
  font-size: 0.9rem;
  text-align: center;
  text-transform: uppercase;
  cursor: not-allowed;
}

nav[aria-label="Main navigation"] > .nav-blog-link.under-construction--nav:focus-visible {
  outline: 2px solid #f2c94c;
  outline-offset: 3px;
  z-index: 90;
}

.under-construction--nav {
  --construction-tape-height: 27px;
  --construction-tape-angle: -1deg;
}

.under-construction--nav::before {
  left: -2%;
  width: 104%;
}

.under-construction--nav::after {
  max-width: calc(100% - 10px);
  padding: 4px 6px;
  font-size: clamp(0.62rem, 0.7vw, 0.7rem);
  letter-spacing: 0.06em;
}

@media (max-width: 780px) {
  .under-construction--reel::before {
    height: 32px;
  }

  .under-construction--reel::after {
    padding: 5px 8px;
    font-size: clamp(0.52rem, 2.4vw, 0.68rem);
  }

  .under-construction--nav {
    --construction-tape-height: 29px;
    --construction-tape-angle: -0.8deg;
  }

  .under-construction--nav::after {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
  }
}