/* ===== reusable "under construction" block =====
   drop this markup into any page that isn't built yet:

   <div class="construction-block">
     <div class="tape"></div>
     <p class="construction-heading">
       <svg class="pixel-icon-inline"><use href="images/icons.svg#icon-caution"></use></svg>
       under construction
     </p>
     <p class="construction-sub">this section isn't built yet — check back soon.</p>
     <div class="tape"></div>
   </div>
*/

.construction-block {
  margin: 22px 0;
  text-align: center;
  padding: 4px 0;
}

.tape {
  height: 14px;
  background: repeating-linear-gradient(
    45deg,
    #1a1a1a,
    #1a1a1a 10px,
    #f2c209 10px,
    #f2c209 20px
  );
  border: 1px solid #000;
}

.construction-heading {
  margin: 14px 0 4px;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #7a5b00;
  animation: construction-blink 1.4s steps(1) infinite;
}

.construction-heading .pixel-icon-inline {
  color: #b8860b;
  width: 18px;
  height: 18px;
}

@keyframes construction-blink {
  0%, 60% { opacity: 1; }
  75% { opacity: 0.35; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .construction-heading { animation: none; }
}

.construction-sub {
  margin: 0 0 14px;
  font-size: 12px;
  color: #444;
}