/* Adjustments to the approved design for the real site.

   The design was authored as a standalone preview. Three things have to change
   for 1,222 real pages:

   1. The menu opens with a checkbox rather than JavaScript. The 1,111 library
      pages are recovered content served script-free on purpose, and a guard
      forbids <script> in them, so a JS toggle would leave those pages with an
      unusable menu on a phone.
   2. The preview strip becomes a real age notice rather than a build banner.
   3. Generated pages keep their own section CSS, so a few selectors need
      scoping so the design does not fight the library and game layouts.
*/

.menu-toggle-box { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menu-toggle { display: none; border: 1px solid var(--line); background: transparent; padding: .65rem; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 1px; background: var(--gold2); margin: 5px; }
.menu-toggle-box:focus-visible + .menu-toggle { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 1150px) {
  .menu-toggle { display: block; justify-self: end; }
  .menu-toggle-box:checked ~ .primary-nav { display: flex; }
}

/* The strip is an age notice, not a preview banner. */
.preview-strip b {
  padding: 2px 9px; border: 1px solid var(--scarlet); border-radius: 999px;
  color: var(--scarlet); font-size: .62rem; letter-spacing: .08em;
}

/* Generated sections set their own max-width; let the design's full-bleed
   header and footer sit outside that without inheriting page padding. */
.libraryPage .site-header, .libraryPage .site-footer,
.kinkPage .site-header, .kinkPage .site-footer { max-width: none; margin-inline: 0; }