/* ==========================================
   KANIFEST 2026 — ISOLATED STYLES
   ========================================== */

/* BUFFON — SELF-HOSTED */
@font-face {
    font-family: 'Buffon';
    src: url('../fonts/Buffon-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   TOKENS
   ========================================== */
:root {
    --kf-terracotta: #BD4A1B;
    --kf-teal: #009B74;
    --kf-charcoal: #433435;
    --kf-cocoa: #3D2D2E;
    --kf-yellow: #FFC54C;
    --kf-amber-bg: #F8BB53C9;
    --kf-amber-overlay: #ECB556C9;
    --kf-offwhite: #FAF6EE;
    --kf-white: #FFFFFF;
    --kf-charcoal-overlay: #433435E5;

    --kf-font-display: 'Buffon', serif;
    --kf-font-body: 'Jost', sans-serif;
}

/* ==========================================
   BASE
   ========================================== */
.kf-body {
    background-color: var(--kf-amber-bg);
    color: var(--kf-charcoal);
    font-family: var(--kf-font-body);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

.kf-section {
    position: relative;
    overflow: hidden;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */
.kf-display {
    font-family: var(--kf-font-display);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.01em;
}

.kf-heading {
    font-family: var(--kf-font-display);
    font-weight: 400;
    line-height: 1.02;
}

.kf-subhead {
    font-family: var(--kf-font-body);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.kf-body-text {
    font-family: var(--kf-font-body);
    font-weight: 300;
    line-height: 1.65;
}

.kf-caption {
    font-family: var(--kf-font-body);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

/* ==========================================
   COLORS — TEXT
   ========================================== */
.kf-text-terracotta {
    color: var(--kf-terracotta);
}

.kf-text-teal {
    color: var(--kf-teal);
}

.kf-text-charcoal {
    color: var(--kf-charcoal);
}

.kf-text-cocoa {
    color: var(--kf-cocoa);
}

.kf-text-yellow {
    color: var(--kf-yellow);
}

.kf-text-offwhite {
    color: var(--kf-offwhite);
}

/* ==========================================
   COLORS — BACKGROUND
   ========================================== */
.kf-bg-amber {
    background-color: var(--kf-amber-bg);
}

.kf-bg-terracotta {
    background-color: var(--kf-terracotta);
}

.kf-bg-teal {
    background-color: var(--kf-teal);
}

.kf-bg-charcoal {
    background-color: var(--kf-charcoal);
}

.kf-bg-cocoa {
    background-color: var(--kf-cocoa);
}

.kf-bg-yellow {
    background-color: var(--kf-yellow);
}

.kf-bg-offwhite {
    background-color: var(--kf-offwhite);
}


/* ==========================================
   OVERLAY
   ========================================== */
.kf-overlay-amber::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--kf-amber-overlay);
    pointer-events: none;
    z-index: 1;
}

.kf-overlay-amber>* {
    position: relative;
    z-index: 2;
}

/* ==========================================
   BUTTONS
   ========================================== */
.kf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    font-family: var(--kf-font-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.kf-btn-terracotta {
    background-color: var(--kf-terracotta);
    color: var(--kf-offwhite);
    box-shadow: 6px 6px 0 var(--kf-charcoal);
}

.kf-btn-teal {
    background-color: var(--kf-teal);
    color: var(--kf-offwhite);
    box-shadow: 6px 6px 0 var(--kf-charcoal);
}

.kf-btn-yellow {
    background-color: var(--kf-yellow);
    color: var(--kf-charcoal);
    box-shadow: 6px 6px 0 var(--kf-white);
}

.kf-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--kf-charcoal);
}

.kf-btn-yellow:hover {
    box-shadow: 8px 8px 0 var(--kf-white);
}

.kf-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 var(--kf-charcoal);
}

/* ==========================================
   SCROLL ENTRY ANIMATIONS
   ========================================== */
[data-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-animate][data-delay="1"] {
    transition-delay: 100ms;
}

[data-animate][data-delay="2"] {
    transition-delay: 200ms;
}

[data-animate][data-delay="3"] {
    transition-delay: 300ms;
}

[data-animate][data-delay="4"] {
    transition-delay: 400ms;
}

[data-animate][data-delay="5"] {
    transition-delay: 500ms;
}

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
}

/* KANIFEST INPUTS */
.kf-input {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--kf-font-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--kf-cocoa);
    background-color: var(--kf-white);
    border: 2px solid var(--kf-charcoal);
    border-radius: 6px;
    outline: none;
    transition: border-color 200ms ease-out;
}

.kf-input:focus {
    border-color: var(--kf-terracotta);
}

.kf-input::placeholder {
    color: rgba(67, 52, 53, 0.4);
}

.kf-file-input {
    padding: 8px;
}

.kf-file-input::file-selector-button {
    padding: 8px 14px;
    margin-right: 12px;
    font-family: var(--kf-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kf-offwhite);
    background-color: var(--kf-terracotta);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

/* KANIFEST PILLS (radio) */
.kf-pill {
    display: inline-block;
    padding: 12px 20px;
    font-family: var(--kf-font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--kf-charcoal);
    background-color: var(--kf-white);
    border: 2px solid var(--kf-charcoal);
    border-radius: 6px;
    cursor: pointer;
    transition: all 150ms ease-out;
}

.kf-pill:hover {
    background-color: var(--kf-yellow);
}

.kf-pill.is-active {
    background-color: var(--kf-terracotta);
    color: var(--kf-offwhite);
}

.kf-btn-charcoal {
    background-color: var(--kf-charcoal);
    color: var(--kf-offwhite);
    box-shadow: 4px 4px 0 rgba(67, 52, 53, 0.4);
    cursor: not-allowed;
}