* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            min-height: 100%;
        }

        body {
            background: #050000;
            overflow-x: hidden;
            font-family: Arial, Helvetica, sans-serif;
        }


        /* =====================================================
           PAGE BACKGROUND
        ===================================================== */

        .fc-page {

            position: relative;

            width: 100%;
            min-height: 100vh;

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 60px 30px;

            overflow: hidden;

            background-image:
                linear-gradient(
                    rgba(0,0,0,.25),
                    rgba(0,0,0,.40)
                ),
                url("https://femalecannibals.com/female-cannibals-background.png");

            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;

        }


        /* =====================================================
           DARK / RED VIGNETTE
        ===================================================== */

        .fc-page::before {

            content: "";

            position: absolute;
            inset: 0;

            pointer-events: none;

           

            z-index: 1;
        }


        /* =====================================================
           FILM GRAIN
        ===================================================== */

        .fc-grain {

            position: fixed;

            width: 200%;
            height: 200%;

            left: -50%;
            top: -50%;

            z-index: 2;

            pointer-events: none;

            opacity: .055;

            background-image:
                repeating-radial-gradient(
                    circle at 20% 30%,
                    rgba(255,255,255,.3) 0,
                    rgba(255,255,255,.3) 1px,
                    transparent 1px,
                    transparent 3px
                );

            animation: fc-grain 0.20s steps(2) infinite;

        }


        @keyframes fc-grain {

            0% {
                transform: translate(0,0);
            }

            25% {
                transform: translate(-1%,1%);
            }

            50% {
                transform: translate(1%,-1%);
            }

            75% {
                transform: translate(1%,1%);
            }

            100% {
                transform: translate(-1%,-1%);
            }

        }


        /* =====================================================
           MAIN IMAGE AREA
        ===================================================== */

        .fc-poster-wrap {

            position: relative;

            width: min(1500px, 94vw);

            z-index: 10;

            animation: posterArrival 1.2s ease both;

        }


        @keyframes posterArrival {

            from {
                opacity: 0;
                transform: scale(.96) translateY(20px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }

        }


        /* =====================================================
           RED GLOW BEHIND IMAGE
        ===================================================== */

        .fc-poster-wrap::before {

            content: "";

            position: absolute;

            left: 3%;
            right: 3%;
            top: 4%;
            bottom: 3%;

            background: #8b0000;

            filter: blur(45px);

            opacity: .65;

            z-index: -2;

            animation: fc-glow 3.5s ease-in-out infinite;

        }


        @keyframes fc-glow {

            0%,
            100% {
                opacity: .42;
            }

            50% {
                opacity: .80;
            }

        }


        /* =====================================================
           BLOODY FRAME
        ===================================================== */

        .fc-frame {

            position: relative;

            padding: 8px;

            background:
                linear-gradient(
                    135deg,
                    #320000,
                    #d00000 20%,
                    #610000 40%,
                    #f21b1b 50%,
                    #4a0000 72%,
                    #a90000
                );

            box-shadow:
                0 0 0 2px rgba(0,0,0,.9),
                0 0 16px rgba(255,0,0,.5),
                0 0 55px rgba(255,0,0,.35),
                0 35px 80px rgba(0,0,0,.9);

        }


        /* rough inner border */

        .fc-frame::before {

            content: "";

            position: absolute;

            inset: 0;

            pointer-events: none;

            border:
                2px solid rgba(255,80,80,.45);

            box-shadow:
                inset 0 0 16px rgba(255,0,0,.8);

            z-index: 5;

        }


        /* =====================================================
           MAIN BAND IMAGE
        ===================================================== */

        .fc-main-image {

            position: relative;

            display: block;

            width: 100%;
            height: auto;

            z-index: 3;

        }


        /* =====================================================
   ANIMATED BLOOD DRIPS
===================================================== */

.fc-drips {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -70px;
    height: 75px;
    pointer-events: none;
    z-index: 20;
}


/* Blood hanging from frame */
.fc-drips span {
    position: absolute;
    top: 0;

    width: 7px;
    height: 18px;

    background: linear-gradient(
        to bottom,
        #ff1515 0%,
        #b00000 35%,
        #650000 100%
    );

    border-radius: 0 0 8px 8px;

    box-shadow:
        0 0 5px rgba(255,0,0,.7),
        inset 2px 0 2px rgba(255,100,100,.3);

    transform-origin: top;

    animation: bloodStretch 4s ease-in infinite;
}


/* Actual falling droplet */
.fc-drips span::after {
    content: "";

    position: absolute;

    width: 11px;
    height: 14px;

    left: 50%;
    bottom: -7px;

    background:
        radial-gradient(
            ellipse at 35% 30%,
            #ff3333,
            #a00000 45%,
            #4b0000 100%
        );

    border-radius: 60% 60% 70% 70%;

    box-shadow:
        0 0 6px rgba(255,0,0,.7);

    opacity: 0;

    animation-name: bloodDrop;
    animation-duration: var(--drip-speed, 8s);
    animation-delay: var(--drip-delay, 0s);
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}


/* =====================================================
   RANDOMIZED DRIP TIMING
   Different positions, speeds and starting times
===================================================== */

.fc-drips span:nth-child(1) {
    left: 3%;
    animation-duration: 7.3s;
    animation-delay: -2.1s;
}
.fc-drips span:nth-child(1)::after {
    animation-duration: 7.3s;
    animation-delay: -2.1s;
}

.fc-drips span:nth-child(2) {
    left: 9%;
    animation-duration: 11.7s;
    animation-delay: -8.4s;
}
.fc-drips span:nth-child(2)::after {
    animation-duration: 11.7s;
    animation-delay: -8.4s;
}

.fc-drips span:nth-child(3) {
    left: 16%;
    animation-duration: 6.1s;
    animation-delay: -4.7s;
}
.fc-drips span:nth-child(3)::after {
    animation-duration: 6.1s;
    animation-delay: -4.7s;
}

.fc-drips span:nth-child(4) {
    left: 24%;
    animation-duration: 14.2s;
    animation-delay: -1.3s;
}
.fc-drips span:nth-child(4)::after {
    animation-duration: 14.2s;
    animation-delay: -1.3s;
}

.fc-drips span:nth-child(5) {
    left: 32%;
    animation-duration: 8.8s;
    animation-delay: -6.6s;
}
.fc-drips span:nth-child(5)::after {
    animation-duration: 8.8s;
    animation-delay: -6.6s;
}

.fc-drips span:nth-child(6) {
    left: 40%;
    animation-duration: 12.9s;
    animation-delay: -3.2s;
}
.fc-drips span:nth-child(6)::after {
    animation-duration: 12.9s;
    animation-delay: -3.2s;
}

.fc-drips span:nth-child(7) {
    left: 48%;
    animation-duration: 5.7s;
    animation-delay: -4.1s;
}
.fc-drips span:nth-child(7)::after {
    animation-duration: 5.7s;
    animation-delay: -4.1s;
}

.fc-drips span:nth-child(8) {
    left: 56%;
    animation-duration: 10.4s;
    animation-delay: -7.8s;
}
.fc-drips span:nth-child(8)::after {
    animation-duration: 10.4s;
    animation-delay: -7.8s;
}

.fc-drips span:nth-child(9) {
    left: 64%;
    animation-duration: 15.1s;
    animation-delay: -9.5s;
}
.fc-drips span:nth-child(9)::after {
    animation-duration: 15.1s;
    animation-delay: -9.5s;
}

.fc-drips span:nth-child(10) {
    left: 72%;
    animation-duration: 7.9s;
    animation-delay: -5.4s;
}
.fc-drips span:nth-child(10)::after {
    animation-duration: 7.9s;
    animation-delay: -5.4s;
}

.fc-drips span:nth-child(11) {
    left: 80%;
    animation-duration: 13.6s;
    animation-delay: -10.1s;
}
.fc-drips span:nth-child(11)::after {
    animation-duration: 13.6s;
    animation-delay: -10.1s;
}

.fc-drips span:nth-child(12) {
    left: 89%;
    animation-duration: 6.8s;
    animation-delay: -1.9s;
}
.fc-drips span:nth-child(12)::after {
    animation-duration: 6.8s;
    animation-delay: -1.9s;
}

.fc-drips span:nth-child(13) {
    left: 96%;
    animation-duration: 16.3s;
    animation-delay: -12.7s;
}
.fc-drips span:nth-child(13)::after {
    animation-duration: 16.3s;
    animation-delay: -12.7s;
}

/* -----------------------------------------
   Hanging blood stretches
----------------------------------------- */

@keyframes bloodStretch {

    0% {
        height: 8px;
    }

    35% {
        height: 18px;
    }

    55% {
        height: 28px;
    }

    64% {
        height: 34px;
    }

    /* droplet breaks away */

    67% {
        height: 20px;
    }

    100% {
        height: 8px;
    }
}


/* -----------------------------------------
   Droplet forms → falls → disappears
----------------------------------------- */

@keyframes bloodDrop {

    0%,
    35% {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(0)
            scale(.2);
    }

    /* droplet starts forming */

    45% {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0)
            scale(.65);
    }

    /* gets heavy */

    60% {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(5px)
            scale(1);
    }

    /* BREAKS FREE */

    66% {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(12px)
            scale(.85,1.25);
    }

    /* falling */

    78% {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(45px)
            scale(.8,1.35);
    }

    /* falls away */

    90% {
        opacity: .3;
        transform:
            translateX(-50%)
            translateY(75px)
            scale(.65,1.1);
    }

    100% {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(90px)
            scale(.4);
    }
}

        /* =====================================================
           FLOOR GLOW UNDER IMAGE
        ===================================================== */

        .fc-floor-glow {

            position: absolute;

            left: 12%;
            right: 12%;

            bottom: -65px;

            height: 65px;

            z-index: -1;

            background:
                radial-gradient(
                    ellipse at center,
                    rgba(255,0,0,.75),
                    rgba(130,0,0,.20) 42%,
                    transparent 72%
                );

            filter: blur(18px);

        }


        /* =====================================================
           MOBILE
        ===================================================== */

        @media (max-width: 900px) {

            .fc-page {

                padding:
                    35px 15px
                    60px;

                min-height: 100svh;

                background-attachment: scroll;

            }


            .fc-poster-wrap {

                width: 96vw;

            }


            .fc-frame {

                padding: 4px;

            }


            .fc-poster-wrap::before {

                filter: blur(25px);

            }

        }


        @media (max-width: 500px) {

            .fc-page {

                padding-left: 8px;
                padding-right: 8px;

            }


            .fc-poster-wrap {

                width: 100%;

            }


            .fc-drips {

                bottom: -27px;
                transform: scaleY(.72);
                transform-origin: top;

            }

        }


        /* =====================================================
           RED FLASH
        ===================================================== */

        .fc-flash {

            position: fixed;

            inset: 0;

            z-index: 50;

            pointer-events: none;

            background:
                rgba(255,0,0,0);

            animation:
                fc-flash 9s infinite;

        }


        @keyframes fc-flash {

            0%,
            92%,
            94%,
            100% {

                background:
                    rgba(255,0,0,0);

            }

            92.5% {

                background:
                    rgba(180,0,0,.06);

            }

            93% {

                background:
                    rgba(255,0,0,.025);

            }

        }
        
/* =====================================================
   FEMALE CANNIBALS SIGNUP SECTION
===================================================== */

.fc-signup-section {
  position: relative;
  padding: 70px 25px;
  background:
    radial-gradient(
      circle at center,
      rgba(120,0,0,.18),
      transparent 55%
    ),
    #070404;
  overflow: hidden;
}

.fc-signup-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.012) 0,
      rgba(255,255,255,.012) 1px,
      transparent 1px,
      transparent 4px
    );
}

.fc-signup-inner {
  position: relative;
  z-index: 2;

  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;

  align-items: center;

  padding: 35px;

  background:
    linear-gradient(
      145deg,
      rgba(18,10,10,.98),
      rgba(6,3,3,.98)
    );

  border: 1px solid #5d0000;

  box-shadow:
    0 0 0 1px #160000,
    0 0 30px rgba(180,0,0,.2),
    inset 0 0 40px rgba(120,0,0,.08);
}

/* LEFT GRAPHIC */

.fc-signup-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-signup-art img {
  display: block;

  width: 100%;
  max-width: 500px;
  height: auto;

  filter:
    drop-shadow(0 0 10px rgba(255,0,0,.45))
    drop-shadow(0 15px 25px rgba(0,0,0,.9));

  transform: rotate(-1deg);
}

/* RIGHT SIDE */

.fc-signup-form-wrap {
  position: relative;
}

.fc-signup-kicker {
  margin-bottom: 8px;

  color: #b90000;

  font-size: 13px;
  font-weight: 900;

  letter-spacing: .28em;
  text-transform: uppercase;
}

.fc-signup-form-wrap h2 {
  margin: 0 0 12px;

  color: #f1f1f1;

  font-size: clamp(24px, 4vw, 48px);
  line-height: .95;

  font-weight: 1000;

  letter-spacing: -.04em;
  text-transform: uppercase;

  text-shadow:
    2px 2px 0 #4b0000,
    0 0 18px rgba(255,0,0,.18);
}

.fc-signup-copy {
  max-width: 520px;

  margin: 0 0 28px;

  color: #b7aaaa;

  font-size: 16px;
  line-height: 1.6;
}

/* REMOVE BREVO WHITE BOX LOOK */

#sib-form-container {
  width: 100%;
}

#sib-container,
.sib-form,
.sib-container--large,
.sib-container--vertical {
  max-width: none !important;

  background: transparent !important;
  border: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
}

/* INPUT FIELDS */

.fc-field {
  margin-bottom: 14px;
}

.fc-field input {
  width: 100%;

  padding: 17px 18px;

  border: 1px solid #3f1919;
  outline: none;

  background:
    linear-gradient(
      to bottom,
      #110b0b,
      #080505
    );

  color: #fff;

  font-size: 15px;
  font-weight: 700;

  letter-spacing: .08em;

  box-shadow:
    inset 0 0 10px rgba(0,0,0,.9);

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.fc-field input::placeholder {
  color: #6e5d5d;
}

.fc-field input:focus {
  border-color: #b30000;

  box-shadow:
    inset 0 0 12px rgba(0,0,0,.9),
    0 0 14px rgba(180,0,0,.25);

  transform: translateY(-1px);
}

/* BUTTON */

.fc-signup-button {
  position: relative;

  width: 100%;

  margin-top: 4px;

  padding: 17px 24px;

  border: 1px solid #df1a1a;

  background:
    linear-gradient(
      to bottom,
      #be0000,
      #760000
    );

  color: #fff;

  font-size: 15px;
  font-weight: 1000;

  letter-spacing: .16em;

  text-transform: uppercase;

  cursor: pointer;

  box-shadow:
    0 0 0 2px #1c0000,
    0 0 20px rgba(180,0,0,.28);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}

.fc-signup-button:hover {
  transform: translateY(-2px);

  filter: brightness(1.15);

  box-shadow:
    0 0 0 2px #1c0000,
    0 0 30px rgba(255,0,0,.4);
}

/* BREVO LOADER */

.fc-signup-button svg {
  width: 18px;
  height: 18px;

  margin-right: 8px;

  fill: currentColor;
}

/* SUCCESS / ERROR */

.sib-form-message-panel {
  margin: 0 0 18px !important;

  padding: 13px 15px !important;

  border-radius: 0 !important;

  font-size: 14px !important;

  text-align: left !important;
}

#error-message {
  color: #ffb0b0 !important;

  background:
    rgba(120,0,0,.28) !important;

  border:
    1px solid #8f0000 !important;
}

#success-message {
  color: #e8e0e0 !important;

  background:
    rgba(45,0,0,.5) !important;

  border:
    1px solid #b40000 !important;

  box-shadow:
    0 0 16px rgba(150,0,0,.15);
}

/* BREVO HONEYPOT */

.input--hidden {
  display: none !important;
}

/* MOBILE */

@media (max-width: 850px) {

  .fc-signup-inner {
    grid-template-columns: 1fr;

    gap: 28px;

    padding: 25px;
  }

  .fc-signup-art img {
    max-width: 420px;
  }

  .fc-signup-form-wrap {
    text-align: center;
  }

  .fc-signup-copy {
    margin-left: auto;
    margin-right: auto;
  }

}

@media (max-width: 500px) {

  .fc-signup-section {
    padding: 45px 14px;
  }

  .fc-signup-inner {
    padding: 18px;
  }

}        



/* =====================================================
   GLOBAL FIXED SITE BACKGROUND
===================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.48)),
    url("https://femalecannibals.com/female-cannibals-background.png") center center / cover no-repeat;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.38) 72%, rgba(0,0,0,.82) 100%);
}

.fc-page {
  background: transparent !important;
  background-attachment: initial !important;
}

.fc-signup-section {
  background: transparent !important;
}

/* =====================================================
   SCROLL CUE
===================================================== */
.fc-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
  font-size: 22px;
  text-shadow: 0 2px 8px #000, 0 0 14px rgba(255,0,0,.65);
}

.fc-scroll-cue strong {
  display: block;
  color: #ff2a2a;
  font-size: 24px;
  letter-spacing: .12em;
}

.fc-scroll-arrow {
  width: 18px;
  height: 18px;
  border-right: 3px solid #ff2a2a;
  border-bottom: 3px solid #ff2a2a;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 7px rgba(255,0,0,.9));
  animation: piggieBounce 1.35s ease-in-out infinite;
}

@keyframes piggieBounce {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: .65; }
  50% { transform: translateY(10px) rotate(45deg); opacity: 1; }
}

@media (max-width: 700px) {
  .fc-scroll-cue { bottom: 10px; font-size: 10px; }
  .fc-scroll-cue strong { font-size: 12px; }
}

/* =====================================================
   KEEP SCROLLING PIGGIES
===================================================== */

.piggie-scroll-break {
    position: relative;
    z-index: 20;

    padding: 45px 20px 55px;
    text-align: center;

    background: rgba(5,0,0,.68);
    backdrop-filter: blur(3px);

    border-top: 1px solid rgba(150,0,0,.35);
    border-bottom: 1px solid rgba(150,0,0,.35);
}

.piggie-scroll-break a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;

    color: white;
    text-decoration: none;

    text-shadow:
        0 0 10px #000,
        0 0 20px rgba(255,0,0,.5);
}

.piggie-small {
    margin-bottom: 6px;

    color: #a78d8d;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .32em;
}

.piggie-scroll-break strong {
    font-size: clamp(25px, 3vw, 42px);
    font-weight: 1000;
    letter-spacing: .08em;
}

.piggie-arrow {
    margin-top: 5px;

    color: #d00000;

    font-size: 45px;
    line-height: 1;

    filter: drop-shadow(0 0 8px #b00000);

    animation: piggieBounce 1.3s ease-in-out infinite;
}

@keyframes piggieBounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(12px);
    }
}


/* =====================================================
   PIG PEN
===================================================== */

.pigpen-section {
    position: relative;
    z-index: 10;

    padding: 75px 30px 100px;

    background:
        linear-gradient(
            to bottom,
            rgba(5,0,0,.76),
            rgba(5,0,0,.46) 30%,
            rgba(5,0,0,.68)
        );

    backdrop-filter: blur(1px);
}

.pigpen-heading {
    max-width: 1200px;

    margin: 0 auto 45px;

    text-align: center;
}

.pigpen-heading > span {
    display: block;

    color: #b00000;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: .4em;
}

.pigpen-heading h2 {
    margin: 4px 0 8px;

    color: #eee;

    font-size: clamp(45px, 7vw, 90px);
    line-height: .9;

    font-weight: 1000;

    letter-spacing: -.055em;

    text-shadow:
        3px 3px 0 #650000,
        0 0 25px rgba(255,0,0,.35),
        0 8px 20px #000;
}

.pigpen-heading p {
    color: #a99191;

    font-size: 15px;
    letter-spacing: .08em;
}


/* =====================================================
   IMAGE WALL
===================================================== */

.pigpen-grid {
    max-width: 1450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(145px, 1fr));

    gap: 14px;
}

.pigpen-item {
    position: relative;

    aspect-ratio: 1 / 1;

    padding: 4px;

    overflow: hidden;

    background: #100707;

    border: 1px solid rgba(115,0,0,.65);

    box-shadow:
        0 8px 18px rgba(0,0,0,.75);

    cursor: pointer;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;

    transform: rotate(var(--tilt));
}

.pigpen-item:nth-child(4n+1) {
    --tilt: -1.2deg;
}

.pigpen-item:nth-child(4n+2) {
    --tilt: .7deg;
}

.pigpen-item:nth-child(4n+3) {
    --tilt: -0.4deg;
}

.pigpen-item:nth-child(4n+4) {
    --tilt: 1.1deg;
}

.pigpen-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        contrast(1.05)
        saturate(.9);

    transition:
        transform .35s ease,
        filter .35s ease;
}

.pigpen-item::after {
    content: "";

    position: absolute;
    inset: 4px;

    pointer-events: none;

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.6);
}

.pigpen-item:hover {
    z-index: 5;

    transform:
        rotate(0)
        translateY(-6px)
        scale(1.06);

    border-color: #d00000;

    box-shadow:
        0 0 18px rgba(255,0,0,.45),
        0 18px 30px rgba(0,0,0,.9);
}

.pigpen-item:hover img {
    transform: scale(1.05);

    filter:
        contrast(1.08)
        saturate(1.05)
        brightness(1.08);
}


/* =====================================================
   LIGHTBOX
===================================================== */

.pigpen-lightbox {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 35px;

    background: rgba(0,0,0,.94);

    backdrop-filter: blur(8px);
}

.pigpen-lightbox.open {
    display: flex;
}

.pigpen-lightbox img {
    display: block;

    max-width: 92vw;
    max-height: 90vh;

    object-fit: contain;

    border: 3px solid #5c0000;

    box-shadow:
        0 0 40px rgba(255,0,0,.35),
        0 0 100px #000;
}

.pigpen-close {
    position: fixed;

    top: 18px;
    right: 28px;

    z-index: 100000;

    border: 0;
    background: transparent;

    color: white;

    font-size: 55px;
    line-height: 1;

    cursor: pointer;

    text-shadow:
        0 0 12px red;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .pigpen-section {
        padding:
            55px 12px
            75px;
    }

    .pigpen-grid {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 8px;
    }

    .pigpen-item {
        padding: 2px;
    }

    .pigpen-item::after {
        inset: 2px;
    }

}


@media (max-width: 430px) {

    .pigpen-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}

/* =====================================================
   YOU COULD BE HERE TILE
===================================================== */

.pigpen-join {
    background:
        radial-gradient(
            circle at center,
            rgba(130,0,0,.28),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            #180707,
            #050202
        );

    border: 1px solid #750000;
}

.pigpen-join-inner {
    position: absolute;
    inset: 4px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 12px;

    text-align: center;

    overflow: hidden;
}


/* subtle glow behind everything */

.pigpen-join-inner::before {
    content: "";

    position: absolute;

    width: 75%;
    height: 75%;

    border-radius: 50%;

    background: rgba(170,0,0,.16);

    filter: blur(25px);

    pointer-events: none;

    transition:
        background .3s ease,
        transform .3s ease;
}


.pigpen-join-pig {
    position: relative;
    z-index: 2;

    margin-bottom: 5px;

    font-size: clamp(20px, 2vw, 30px);

    filter:
        drop-shadow(0 0 8px rgba(255,0,0,.5));
}


.pigpen-join-small {
    position: relative;
    z-index: 2;

    margin-bottom: 5px;

    color: #967979;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.pigpen-join strong {
    position: relative;
    z-index: 2;

    color: #eee;

    font-size: clamp(16px, 1.8vw, 27px);

    line-height: .88;

    font-weight: 1000;

    letter-spacing: -.04em;

    text-transform: uppercase;

    text-shadow:
        2px 2px 0 #680000,
        0 0 12px rgba(255,0,0,.35);
}


.pigpen-join-click {
    position: relative;
    z-index: 2;

    margin-top: 9px;

    padding: 5px 7px;

    color: #d70000;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .12em;

    border-top:
        1px solid rgba(160,0,0,.45);

    border-bottom:
        1px solid rgba(160,0,0,.45);

    text-transform: uppercase;
}


/* Hover */

.pigpen-join:hover {
    border-color: #ff1717;

    box-shadow:
        0 0 25px rgba(255,0,0,.5),
        0 18px 30px rgba(0,0,0,.9);
}


.pigpen-join:hover
.pigpen-join-inner::before {
    background:
        rgba(220,0,0,.28);

    transform:
        scale(1.2);
}


.pigpen-join:hover
.pigpen-join-click {
    color: #ff3838;
}

/* =====================================================
   PIG PEN SUBMISSION MODAL
===================================================== */

.pigpen-submit-modal {
    position: fixed;
    inset: 0;

    z-index: 100000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 25px;

    overflow-y: auto;
}

.pigpen-submit-modal.open {
    display: flex;
}

.pigpen-submit-backdrop {
    position: fixed;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(90,0,0,.20),
            rgba(0,0,0,.96) 65%
        );

    backdrop-filter: blur(8px);
}


/* BOX */

.pigpen-submit-box {
    position: relative;
    z-index: 2;

    width: min(520px, 100%);

    padding: 35px;

    background:
        radial-gradient(
            circle at top,
            rgba(110,0,0,.18),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #160909,
            #050202
        );

    border: 1px solid #790000;

    box-shadow:
        0 0 0 2px #120000,
        0 0 40px rgba(220,0,0,.28),
        0 30px 100px #000;

    animation:
        pigpenModalIn .28s ease both;
}


@keyframes pigpenModalIn {

    from {
        opacity: 0;

        transform:
            translateY(20px)
            scale(.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* CLOSE */

.pigpen-submit-close {
    position: absolute;

    top: 8px;
    right: 14px;

    z-index: 5;

    border: 0;
    background: transparent;

    color: #9b7777;

    font-size: 38px;
    line-height: 1;

    cursor: pointer;

    transition:
        color .2s ease,
        transform .2s ease;
}

.pigpen-submit-close:hover {
    color: #ff2525;

    transform: rotate(8deg);
}


/* HEADER */

.pigpen-submit-header {
    margin-bottom: 25px;

    text-align: center;
}

.pigpen-submit-kicker {
    display: block;

    margin-bottom: 5px;

    color: #b00000;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .35em;
}

.pigpen-submit-header h2 {
    margin: 0 0 10px;

    color: #eee;

    font-size: clamp(34px, 6vw, 52px);
    line-height: .9;

    font-weight: 1000;

    letter-spacing: -.05em;

    text-shadow:
        3px 3px 0 #5d0000,
        0 0 18px rgba(255,0,0,.3);
}

.pigpen-submit-header p {
    margin: 0;

    color: #a88e8e;

    font-size: 14px;
    line-height: 1.5;
}


/* PHOTO PREVIEW */

.pigpen-upload-preview {
    position: relative;

    width: 180px;
    aspect-ratio: 1 / 1;

    margin:
        0 auto
        28px;

    overflow: hidden;

    background: #090404;

    border: 2px solid #5d0000;

    box-shadow:
        0 0 20px rgba(180,0,0,.20),
        0 15px 30px rgba(0,0,0,.8);

    transform: rotate(-1deg);
}

.pigpen-preview-placeholder {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}

.pigpen-preview-pig {
    margin-bottom: 7px;

    font-size: 38px;
}

.pigpen-preview-placeholder strong {
    color: #d7cccc;

    font-size: 15px;
    font-weight: 1000;

    letter-spacing: .06em;
}

.pigpen-preview-placeholder span {
    margin-top: 4px;

    color: #745f5f;

    font-size: 10px;
}

#pigpen-preview-image {
    position: relative;
    z-index: 2;

    display: none;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* FIELDS */

.pigpen-submit-field {
    margin-bottom: 18px;
}

.pigpen-submit-field label:first-child {
    display: block;

    margin-bottom: 7px;

    color: #9d8585;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .2em;
}

.pigpen-submit-field input[type="text"] {
    width: 100%;

    padding: 15px 16px;

    outline: none;

    border: 1px solid #442020;

    background: #090505;

    color: white;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .06em;

    box-shadow:
        inset 0 0 12px rgba(0,0,0,.8);
}

.pigpen-submit-field input[type="text"]:focus {
    border-color: #a80000;

    box-shadow:
        inset 0 0 12px #000,
        0 0 12px rgba(190,0,0,.2);
}


/* FILE INPUT */

#pigpen-photo {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}

.pigpen-file-button {
    display: block !important;

    width: 100%;

    padding: 14px;

    border: 1px dashed #720000;

    background:
        rgba(80,0,0,.15);

    color: #d4c4c4 !important;

    text-align: center;

    font-size: 12px !important;
    font-weight: 900;

    letter-spacing: .14em !important;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.pigpen-file-button:hover {
    border-color: #d00000;

    background:
        rgba(130,0,0,.22);

    color: white !important;
}

.pigpen-file-name {
    margin-top: 7px;

    color: #725e5e;

    font-size: 9px;

    text-align: center;

    letter-spacing: .08em;
}


/* SUBMIT */

.pigpen-submit-button {
    width: 100%;

    margin-top: 4px;

    padding: 16px 20px;

    border: 1px solid #e01818;

    background:
        linear-gradient(
            to bottom,
            #b90000,
            #690000
        );

    color: white;

    font-size: 13px;
    font-weight: 1000;

    letter-spacing: .15em;

    cursor: pointer;

    box-shadow:
        0 0 0 2px #190000,
        0 0 20px rgba(190,0,0,.25);

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}

.pigpen-submit-button:hover {
    transform: translateY(-2px);

    filter: brightness(1.15);

    box-shadow:
        0 0 0 2px #190000,
        0 0 28px rgba(255,0,0,.4);
}

.pigpen-submit-button:disabled {
    opacity: .55;

    cursor: wait;

    transform: none;
}

.pigpen-heading p strong {
    color: #e00000;
    font-weight: 1000;
    text-shadow: 0 0 10px rgba(255,0,0,.35);
}


/* NOTE / MESSAGES */

.pigpen-review-note {
    margin:
        13px 0 0;

    color: #6e5d5d;

    font-size: 9px;

    text-align: center;

    letter-spacing: .08em;
}

.pigpen-submit-message {
    display: none;

    margin-top: 15px;

    padding: 12px;

    border: 1px solid #650000;

    background:
        rgba(80,0,0,.18);

    color: #ddd;

    font-size: 12px;
    line-height: 1.5;

    text-align: center;
}


/* HONEYPOT */

.pigpen-honeypot {
    position: absolute !important;

    left: -10000px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}


/* MOBILE */

@media (max-width: 550px) {

    .pigpen-submit-modal {
        padding: 12px;
        align-items: flex-start;
    }

    .pigpen-submit-box {
        margin:
            20px 0;

        padding:
            30px 20px
            25px;
    }

    .pigpen-upload-preview {
        width: 145px;
    }

}