:root {
      --void: #08070a;
      --char: #100c11;
      --panel: #17111a;
      --blood: #7a1128;
      --blood-bright: #a3172f;
      --plum: #4a2545;
      --bone: #d8cfc2;
      --bone-dim: #a89a92;
      --hairline: rgba(216, 207, 194, 0.14);
      --glow: 0 0 18px rgba(163, 23, 47, 0.55);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Georgia;
      background-color: var(--void);
      background-image:
        linear-gradient(180deg, rgba(8,7,10,0.88) 0%, rgba(8,7,10,0.94) 100%),
        url(https://lastseenwearing.neocities.org/images/bskulls.jpg);
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 100vh;
      line-height: 1.6;
      font-size: clamp(0.95rem, 1.5vw, 1.05rem);
      color: var(--bone);
      padding: clamp(1.5rem, 5vw, 3rem) 1rem;
    }

    .container {
      background: linear-gradient(180deg, rgba(23,17,26,0.92) 0%, rgba(16,12,17,0.96) 100%);
      border: 1px solid var(--hairline);
      padding: clamp(1.5rem, 4vw, 2.5rem);
      max-width: 800px;
      width: 100%;
      text-align: center;
      box-shadow: 0 0 40px rgba(0,0,0,0.65), inset 0 0 60px rgba(0,0,0,0.35);
      border-radius: 2px;
      position: relative;
    }

    .container h1 {
      font-weight: 700;
      font-size: clamp(1.4rem, 4vw, 2.1rem);
      letter-spacing: 0.05em;
      text-shadow: var(--glow), 0 2px 4px black;
      margin-bottom: 1rem;
    }

    .container h2 {
      font-weight: 400;
      font-size: clamp(1.1rem, 2.6vw, 1.4rem);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--bone-dim);
      margin: clamp(1.5rem, 4vw, 2rem) 0 1rem;
    }

    .container p {
      color: var(--bone-dim);
      font-size: clamp(0.95rem, 1.6vw, 1.05rem);
      max-width: 65ch;
      margin: 0 auto;
    }

    .home-btn {
      display: inline-block;
      background: linear-gradient(180deg, var(--blood) 0%, #4a0d1c 100%);
      color: var(--bone);
      padding: 0.6rem 1.5rem;
      border: 1px solid rgba(216,207,194,0.25);
      border-radius: 2px;
      text-decoration: none;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.8rem;
      margin-bottom: 1.5rem;
      transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.2s ease;
    }

    .home-btn:hover {
      background: linear-gradient(180deg, var(--blood-bright) 0%, var(--blood) 100%);
      box-shadow: var(--glow);
      transform: translateY(-1px);
      color: var(--bone);
    }

    .divider {
      display: flex;
      align-items: center;
      gap: 1rem;
      max-width: 320px;
      margin: 0.25rem auto 1.5rem;
      color: var(--bone-dim);
      font-size: 0.7rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
    }

    .divider::before,
    .divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--hairline), transparent);
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
      gap: clamp(0.5rem, 2vw, 0.75rem);
      margin-top: 1.5rem;
    }

    .gallery img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      cursor: pointer;
      border-radius: 2px;
      border: 1px solid var(--hairline);
      filter: grayscale(45%) contrast(1.05) brightness(0.85);
      transition: transform 0.35s ease, filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    }

    .gallery img:hover {
      transform: scale(1.05);
      filter: grayscale(0%) contrast(1.1) brightness(1);
      border-color: var(--blood-bright);
      box-shadow: var(--glow);
    }

    .interview-links {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      align-items: center;
    }

    .lightbox {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: rgba(4,3,5,0.92);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .lightbox img {
      max-width: 90%;
      max-height: 90%;
      border-radius: 4px;
      border: 1px solid var(--hairline);
      box-shadow: 0 0 40px rgba(0,0,0,0.8);
    }

    .lightbox.active {
      display: flex;
    }

    .lightbox-close {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 30px;
      color: var(--bone);
      cursor: pointer;
      transition: color 0.3s ease, text-shadow 0.3s ease;
    }

    .lightbox-close:hover {
      color: var(--blood-bright);
      text-shadow: 0 0 10px rgba(163,23,47,0.7);
    }

    a {
      color: var(--bone);
      text-decoration: none;
      transition: color 0.3s ease, text-shadow 0.3s ease;
    }

    a:hover {
      color: var(--blood-bright);
      text-shadow: 0 0 8px rgba(163, 23, 47, 0.65);
      text-decoration: underline;
    }

    a:visited {
      color: var(--bone);
    }

    a:focus-visible {
      outline: 1px solid var(--blood-bright);
      outline-offset: 3px;
    }

    a:active {
      color: var(--blood);
    }

    #pagedoll {
      position: fixed;
      width: clamp(70px, 10vw, 140px);
      height: auto;
      bottom: 10px;
      right: 10px;
      filter: drop-shadow(0 0 0.75rem rgba(163, 23, 47, 0.75));
    }

    @media (max-width: 600px) {
      #pagedoll {
        display: none;
      }

      .container {
        padding: 1.25rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        transition: none !important;
      }
    }