/* Static export fixes + local paths */
[style *= "opacity: 0"] {
    opacity: 1!important
}
[style *= "translateY"], [style *= "translateX"] {
    transform: none!important
}
html {
    scroll - behavior: smooth
}
img {
    max - width: 100 % ;
    height: auto
}
:root {
    --background: 40 30% 96%;
    --foreground: 30 30% 15%;
    --card: 38 25% 94%;
    --card-foreground: 30 30% 15%;
    --card-border: 35 20% 82%;
    --popover: 40 30% 96%;
    --popover-foreground: 30 30% 15%;
    --popover-border: 35 20% 82%;
    --primary: 95 35% 40%;
    --primary-foreground: 40 30% 98%;
    --primary-border: 95 35% 35%;
    --secondary: 35 25% 88%;
    --secondary-foreground: 30 30% 15%;
    --secondary-border: 35 20% 80%;
    --muted: 38 20% 88%;
    --muted-foreground: 30 15% 45%;
    --muted-border: 35 20% 82%;
    --accent: 100 25% 50%;
    --accent-foreground: 40 30% 98%;
    --accent-border: 100 25% 45%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    --destructive-border: 0 84% 50%;
    --border: 35 20% 82%;
    --input: 35 20% 82%;
    --ring: 95 35% 40%;
    --radius: .75rem;
}
.\!m-0 {
        margin: calc(var(--spacing) * 0)!important
    }

    .-mx-1 {
        margin-inline:calc(var(--spacing) * -1)}

    .mx-2 {
        margin-inline: calc(var(--spacing) * 2)
    }

    .mx-3\.5 {
        margin-inline: calc(var(--spacing) * 3.5)
    }

    .mx-4 {
        margin-inline:calc(var(--spacing) * 4)}

    .mx-6 {
        margin-inline: calc(var(--spacing) * 6)
    }

    .mx-auto {
        margin-inline:auto}

    .-my-2 {
        margin-block:calc(var(--spacing) * -2)}

    .my-0 {
        margin-block: calc(var(--spacing) * 0)
    }

    .my-0\.5 {
        margin-block: calc(var(--spacing) * .5)
    }

    .my-1 {
        margin-block:calc(var(--spacing) * 1)}

    .-mt-4 {
        margin-top: calc(var(--spacing) * -4)
    }

    .mt-0\.5 {
        margin-top: calc(var(--spacing) * .5)
    }

    .mt-1 {
        margin-top: calc(var(--spacing) * 1)
    }

    .mt-1\.5 {
        margin-top: calc(var(--spacing) * 1.5)
    }

    .mt-2 {
        margin-top: calc(var(--spacing) * 2)
    }

    .mt-4 {
        margin-top: calc(var(--spacing) * 4)
    }

    .mt-10 {
        margin-top: calc(var(--spacing) * 10)
    }

    .mt-24 {
        margin-top: calc(var(--spacing) * 24)
    }

    .mt-auto {
        margin-top: auto
    }

    .mr-2 {
        margin-right: calc(var(--spacing) * 2)
    }

    .mb-0\.5 {
        margin-bottom: calc(var(--spacing) * .5)
    }

    .mb-1 {
        margin-bottom: calc(var(--spacing) * 1)
    }

    .mb-1\.5 {
        margin-bottom: calc(var(--spacing) * 1.5)
    }

    .mb-2 {
        margin-bottom: calc(var(--spacing) * 2)
    }

    .mb-3 {
        margin-bottom: calc(var(--spacing) * 3)
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing) * 4)
    }

    .mb-5 {
        margin-bottom: calc(var(--spacing) * 5)
    }

    .mb-6 {
        margin-bottom: calc(var(--spacing) * 6)
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing) * 8)
    }

    .mb-10 {
        margin-bottom: calc(var(--spacing) * 10)
    }

    .mb-12 {
        margin-bottom: calc(var(--spacing) * 12)
    }

    .mb-16 {
        margin-bottom: calc(var(--spacing) * 16)
    }

    .-ml-4 {
        margin-left: calc(var(--spacing) * -4)
    }

    .ml-1 {
        margin-left: calc(var(--spacing) * 1)
    }

    .ml-4 {
        margin-left: calc(var(--spacing) * 4)
    }

    .ml-auto {
        margin-left: auto
    }

    .line-clamp-2 {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }
.text-white {
    color: #fff;
}
.bg-card {
    background-color: hsl(var(--card));
}
.border-border, .border-border\/50 {
    border-color: hsl(var(--border));
}
.border {
    border-style: var(--tw-border-style);
    border-width: 1px;
}
.rounded-2xl {
    border-radius: var(--radius-2xl);
}
.text-primary {
    color: hsl(var(--primary));
}
.text-background {
    color: hsl(var(--background));
}
.texture - overlay {
        background - image: url('../images/kraft-texture.png') !important
    }
    /* Compatibility hover for simplified cards/pages */
    .card {
        transition: box - shadow .3 s ease,
        transform .3 s ease,
        border - color .3 s ease;overflow: hidden
    }.card: hover {
        box - shadow: 0 18 px 40 px rgba(30, 58, 47, .14);
        border - color: rgba(30, 58, 47, .25)
    }.card: hover.stat - icon, .post: hover.post - emoji {
        transform: scale(1.10)
    }.stat - icon, .post - emoji {
        transition: transform .3 s ease
    }.leader - card {
        transition: background .3 s ease,
        box - shadow .3 s ease,
        transform .3 s ease
    }.leader - card: hover {
        background: rgba(255, 255, 255, .10);box - shadow: 0 16 px 36 px rgba(6, 78, 59, .35)
    }.btn: hover svg {
        transform: translateX(4 px)
    }.btn svg {
        transition: transform .3 s ease
    }
    /* local navigation inserted in static pages */
    .static - nav {
        background: #1e3a2f;padding:14px 20px;position:sticky;top:0;z-index:30}.static-nav-inner{max-width:1120px;margin:auto;display:flex;gap:18px;flex-wrap:wrap;align-items:center}.static-nav a{color:rgba(255,255,255,.78);font:600 14px Mulish,Arial,sans-serif;text-decoration:none}.static-nav a:hover{color:# fff
    }
    /* make form submit messages visible */
    .form - success {
        display: none;margin - top: 16 px;padding: 14 px 16 px;border - radius: 12 px;background: #ecfdf5;color: #065f46;font-weight:700}.form-error{display:none;margin-top:16px;padding:14px 16px;border-radius:12px;background:# fff1f2;color: #991b1b;font-weight:700}

.static-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #1e3a2f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.static-nav-inner {
  width: min(1120px, calc(100% - 32px));
  min-height: 64px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.static-nav-logo {
  color: #fff;
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}

.static-nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

.static-nav-menu a {
  color: rgba(255, 255, 255, 0.78);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.static-nav-menu a:hover,
.static-nav-menu a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.static-nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 9px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.static-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  background: #fff;
  border-radius: 999px;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

@media (max-width: 767px) {
  .static-nav-inner {
    position: relative;
    min-height: 58px;
  }

  .static-nav-toggle {
    display: block;
  }

  .static-nav-menu {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    background: #1e3a2f;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  }

  .static-nav-menu.is-open {
    display: flex;
  }

  .static-nav-menu a {
    width: 100%;
    padding: 12px 14px;
  }

  .static-nav-toggle.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .static-nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  .static-nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}
.h-16 {
    height: calc(var(--spacing) * 16);
}

@supports (color:color-mix(in lab,red,red)) {
    .text-white\/70 {
        color: 
color-mix(in oklab, var(--color-white) 70%, transparent);
    }
}

@media (min-width: 48rem) {
    .md\:text-4xl {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
}
@media (hover: hover) {
    .hover\:text-\[\#1C1409\]:hover {
        color: #1c1409;
    }
    .hover\:text-white:hover {
        color: var(--color-white);
    }
    @supports (color:color-mix(in lab,red,red)) {
        .hover\:bg-white\/90:hover {
            background-color: 
color-mix(in oklab, var(--color-white) 90%, transparent);
        }
    }
}