/* GLOBAL */
body {
  font-family: 'Georgia', serif;
  background-color: #0b0f0c;
  color: #f5f5dc;
}
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Georgia', 'Times New Roman', Times, serif;
            line-height: 1.55;
            padding: 2rem 1rem;
        }

        .document-container {
            max-width: 860px;
            margin: 0 auto;
            background-color: #fffef7;
            box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            padding: 3rem 2rem;
            transition: all 0.2s;
        }

        /* title styling */
        h1 {
            font-size: 2.6rem;
            letter-spacing: -0.5px;
            font-weight: 700;
            color: #1f3b1a;
            border-left: 6px solid #2c6e2f;
            padding-left: 1.2rem;
            margin-bottom: 2rem;
            font-family: 'Palatino', 'Georgia', serif;
        }

        /* dropcap for first paragraph? but not necessary, keep natural */
        p {
            margin-bottom: 1.25rem;
            font-size: 1.05rem;
            text-align: left;
        }

        /* Dialogue & narrative spacing */
        .dialogue-line {
            display: block;
            margin-top: 0.2rem;
        }

        /* italic for inner voice / hums / thoughts */
        em, i {
            font-style: italic;
            color: #2a4b2a;
        }

        /* small styling for certain inner thoughts but keep original */
        strong {
            font-weight: 600;
            color: #1f3a1c;
        }

        hr {
            margin: 2rem 0;
            border: none;
            height: 1px;
            background: linear-gradient(to right, #cbdcc9, transparent);
        }

        /* maintain line breaks for poetry/prose rhythm */
        .line-break {
            white-space: pre-line;
        }

        /* quotes and special formatting */
        .foreign-phrase {
            font-style: italic;
            background-color: #f6faf4;
            padding: 0 0.1rem;
        }

        /* add subtle hover for readability */
        .document-container:hover {
            box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.25);
        }

        /* for signatures like *Tufia kwa gi!* etc. keep authentic */
        @media (max-width: 640px) {
            .document-container {
                padding: 1.8rem 1.2rem;
            }
            h1 {
                font-size: 2rem;
                padding-left: 0.9rem;
            }
            p {
                font-size: 1rem;
            }
        }

        /* tiny inline code? no needed */
        .action-break {
            font-weight: 400;
            font-style: normal;
        }

        /* simulating the original doc spacing */
        .section-break {
            margin: 1.8rem 0;
            text-align: center;
            letter-spacing: 4px;
            font-size: 0.9rem;
            color: #7f9a6e;
        }
h2, @font-face {
   font-size: 18px; 
   font-family: 'Hakuna';
    src: url('fonts/Hakuna.woff2') format('woff2'),
         url('fonts/Hakuna.woff') format('woff'),
         url('fonts/Hakuna.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* HERO */
.hero {
  background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.95)),
  url('storyscape africa vignette 2.jpg');
  background-size: cover;
  background-position: center;
}

/* TEXT EFFECTS */
.glow-fire {
  text-shadow: 0 0 10px #ff7a00, 0 0 25px #ff3c00;
}

/* LOGO */
.logo {
  height: 60px;
}

/* OVERLAY */
.pattern-overlay {
  position: absolute;
  inset: 0;
  background-image: url('2.png');
  background-size: cover;
  opacity: 0.05;
  pointer-events: none;
}

/* CTA BUTTON */
.cta {
  background: linear-gradient(135deg, #ff7a00, #ff3c00);
  transition: all 0.3s ease;
}

.cta:hover {
  transform: scale(1.05);
}

/* LINKS */
.story-link {
  display: block;
  margin-top: 8px;
  color: #fb923c;
  text-decoration: underline;
  transition: 0.2s ease;
}

.story-link:hover {
  color: #fdba74;
}

/* ALERT BOXES */
.error-box {
  background: #7f1d1d;
  color: #fecaca;
  padding: 10px;
  margin-top: 12px;
  border-radius: 10px;
  display: none;
  font-size: 14px;
}

.success-box {
  background: #14532d;
  color: #bbf7d0;
  padding: 10px;
  margin-top: 12px;
  border-radius: 10px;
  display: none;
  font-size: 14px;
}