/* sbom.wiki - Street-style Knowledge Mountain */
/* Colors: #E8E0D8 (warm gray), #1A1A20 (charcoal), #4A4A55 (slate), #D4642A (burnt orange), #2A8A8A (teal), #F0ECE5 (soft stone) */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.8;
    color: #4A4A55;
    background-color: #E8E0D8;
    position: relative;
    overflow-x: hidden;
}

/* Leather-texture grain overlay */
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background: repeating-conic-gradient(
        #1A1A20 0% 25%,
        transparent 0% 50%
    ) 0 0 / 4px 4px;
}

/* ─── Header ─── */
.site-header {
    padding: 4rem 2rem 3rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.header-inner {
    max-width: 900px;
    margin: 0 auto;
}

.site-title {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4.5vw, 4rem);
    color: #1A1A20;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-transform: lowercase;
}

.title-dot {
    color: #D4642A;
}

.site-tagline {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 1.15rem;
    color: #4A4A55;
    margin-top: 0.75rem;
    letter-spacing: 0.02em;
}

/* ─── Mountain Ridge Dividers ─── */
.mountain-ridge {
    width: 100%;
    height: 60px;
    position: relative;
    z-index: 1;
}

.ridge-1 {
    background-color: #E8E0D8;
    clip-path: polygon(
        0% 100%,
        0% 65%,
        3% 55%,
        7% 40%,
        10% 30%,
        13% 35%,
        16% 20%,
        19% 25%,
        22% 10%,
        25% 15%,
        28% 5%,
        31% 12%,
        34% 22%,
        37% 8%,
        40% 18%,
        43% 30%,
        46% 15%,
        49% 25%,
        52% 10%,
        55% 20%,
        58% 5%,
        61% 15%,
        64% 28%,
        67% 12%,
        70% 22%,
        73% 8%,
        76% 18%,
        79% 30%,
        82% 20%,
        85% 35%,
        88% 25%,
        91% 40%,
        94% 50%,
        97% 55%,
        100% 60%,
        100% 100%
    );
    background-color: #1A1A20;
    margin-bottom: -1px;
}

.ridge-2 {
    clip-path: polygon(
        0% 0%,
        0% 40%,
        3% 50%,
        6% 60%,
        9% 55%,
        12% 70%,
        15% 65%,
        18% 80%,
        21% 75%,
        24% 90%,
        27% 85%,
        30% 95%,
        33% 88%,
        36% 78%,
        39% 92%,
        42% 82%,
        45% 70%,
        48% 85%,
        51% 75%,
        54% 90%,
        57% 80%,
        60% 95%,
        63% 85%,
        66% 72%,
        69% 88%,
        72% 78%,
        75% 92%,
        78% 82%,
        81% 70%,
        84% 65%,
        87% 75%,
        90% 60%,
        93% 50%,
        96% 45%,
        100% 40%,
        100% 0%
    );
    background-color: #1A1A20;
    margin-top: -1px;
}

/* ─── Masonry Wiki Layout ─── */
.wiki-masonry {
    columns: 3;
    column-gap: 1.5rem;
    padding: 3rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ─── Wiki Cards ─── */
.wiki-card {
    break-inside: avoid;
    background-color: #F0ECE5;
    border-radius: 6px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    width: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    opacity: 0;
    transform: translateY(16px);
}

.wiki-card.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease;
}

.wiki-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.wiki-card.visible:hover {
    transform: translateY(-4px);
}

/* ─── Card Tag ─── */
.card-tag {
    display: inline-block;
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    margin-bottom: 0.75rem;
}

.tag-orange {
    background-color: #D4642A;
    color: #F0ECE5;
}

.tag-teal {
    background-color: #2A8A8A;
    color: #F0ECE5;
}

/* ─── Card Title ─── */
.card-title {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    color: #1A1A20;
    line-height: 1.25;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}

/* ─── Card Body ─── */
.card-body {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4A4A55;
    margin-bottom: 1rem;
}

/* ─── Card Meta ─── */
.card-meta {
    display: inline-block;
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    color: #2A8A8A;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-top: 1px solid #E8E0D8;
    padding-top: 0.75rem;
    width: 100%;
}

/* ─── Footer ─── */
.site-footer {
    background-color: #1A1A20;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.footer-inner {
    max-width: 900px;
    margin: 0 auto;
}

.footer-brand {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: #F0ECE5;
    letter-spacing: -0.02em;
    text-transform: lowercase;
}

.footer-text {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #4A4A55;
    margin-top: 0.5rem;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
    .wiki-masonry {
        columns: 2;
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 560px) {
    .wiki-masonry {
        columns: 1;
        padding: 1.5rem 1rem;
    }

    .site-header {
        padding: 3rem 1.5rem 2rem;
    }

    .mountain-ridge {
        height: 40px;
    }
}