:root {
 /* Marionette Rigging Settings */
 --string-color: oklch(100% 0 0 / 0.25);
 --sign-bg: oklch(8% 0.018 29 / 0.65);
 --sign-border: oklch(56% 0.218 29 / 0.4);
 /* Floor Cast Shadows (from stage spotlights) */
 --floor-shadow-left-1: oklch(5% 0.02 82 / 0.85);
 --floor-shadow-left-2: oklch(5% 0.02 82 / 0.5);
 --floor-shadow-left-3: oklch(5% 0.02 82 / 0.25);
 --floor-shadow-right-1: oklch(5% 0.01 60 / 0.75);
 --floor-shadow-right-2: oklch(5% 0.01 60 / 0.4);
 /* Section Divider */
 --section-divider-height: calc(4rem + 1px); /* 2rem margin top + 1px border + 2rem margin bottom */
}

/* ==========================================================================
   SCRAPPY BRAND SIGN (Inverted Slant - Precision High-Valance Overlay)
   ========================================================================== */

header > nav:first-of-type { /* first nav element reserved for the signboard */
 position: fixed;
 top: 0;
 left: 3vw;
 width: 22vw;
 min-width: 12rem;
 height: 12vh;
 z-index: 25;
}

 header > nav:first-of-type::before, header > nav:first-of-type::after { /* single string for each side of the signboard */
  content: "";
  position: absolute;
  top: 0;
  width: 0.08rem;
  background-color: var(--string-color);
  box-shadow: 0 0 0.4rem var(--shadow-deep);
 }

 header > nav:first-of-type::before { /* left signboard string */
  left: 1.5rem;
  height: 6vh;
 }

 header > nav:first-of-type::after { /* right signboard string */
  right: 1.5rem;
  height: 2vh;
 }

 header > nav:first-of-type > h1 { /* the signboard itself */
  position: absolute;
  top: 2vh;
  left: 0;
  right: 0;
  /*  font-size: clamp(0.75rem, 3.14vw, 2rem);*/
  padding: 0.7rem 0.5rem;
  background: var(--signboard-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--surface-near-white);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  border-radius: 4px 12px 3px 8px;
  border: 1px dashed var(--surface-white-border);
  filter: drop-shadow(0.3rem 0.6rem 0.5rem var(--shadow-near-black));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

/* ==========================================================================
   MARIONETTE NAVIGATION (Janky Hanging Signs)
   ========================================================================== */

header > nav:nth-of-type(2) { /* second nav element for the marionette rigging */
 position: fixed;
 top: 5vh;
 left: 50vw;
 display: flex;
 gap: 2rem;
 z-index: 15;
}

nav menu { /* container for group of marionette signs */
 display: flex;
 list-style-type: none;
 margin-block-start: 0;
 margin-block-end: 0;
 padding-inline-start: 0;
}

 nav menu li { /* each marionette sign's individual rigging unit */
  margin-inline: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
 }

  nav menu li::before { /* single string for each marionette sign */
   content: "";
   display: block;
   width: 0.0625rem;
   height: 6vh;
   background-color: var(--string-color);
   box-shadow: 0 0 0.5rem var(--shadow-heavy);
  }

  nav menu li a { /* marionette signs */
   display: inline-block;
   padding: 0.6rem 1.2rem;
   background: var(--sign-bg);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   color: var(--surface-white);
   text-decoration: none;
   font-weight: 600;
   /*   font-size: 0.95rem;*/
   letter-spacing: 0.05em;
   text-transform: uppercase;
   border: 1px solid var(--sign-border);
   border-radius: 0.4rem;
   white-space: nowrap;
   filter: drop-shadow(0 0.5rem 0.5rem var(--shadow-moderate));
  }

   nav menu li a:hover { /* hover state for marionette signs */
    border-color: var(--velvet-bright);
   }

@media (max-width: 48rem) { /* For narrow screens, adjust marionette signs lower */
 header > nav:nth-of-type(2) {
  top: 7.5vh;
 }
}

/* ==========================================================================
   STAGE FLOOR FOOTER (Cast Shadow Typography)
   ========================================================================== */

footer {
 text-align: center;
 padding: 2rem 0 4rem;
 pointer-events: none;
}

 footer small {
  font-size: xx-small;
  font-family: 'Henny Penny', Courier, monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--surface-white);
  /* Shadow cast at a low angle from two opposing spotlights */
  text-shadow:
  /* Left spotlight (wide wash) — shadow stretches right and forward */
  0.5em 1.5em 0.15em var(--floor-shadow-left-1), 0.9em 2.5em 0.3em var(--floor-shadow-left-2), 1.3em 3.5em 0.5em var(--floor-shadow-left-3),
  /* Right spotlight (narrow pin) — shadow stretches left and forward */
  -0.3em 1.2em 0.1em var(--floor-shadow-right-1), -0.6em 2.0em 0.25em var(--floor-shadow-right-2);
 }