/* =========================================================
   FLIPCORD — DARK INDUSTRIAL
   Visual System
   ========================================================= */


/* ---------------------------------------------------------
   1. VARIABLES
   --------------------------------------------------------- */

:root {

    --bg: #17191b;
    --bg-deep: #111315;
    --surface: #202326;
    --surface-light: #292c2f;

    --text: #e8e6df;
    --text-soft: #aaa9a3;
    --text-muted: #74756f;

    --accent: #d6a62c;

    --border: #383b3e;

    --display: "IBM Plex Sans Condensed", sans-serif;
    --body: "IBM Plex Sans", sans-serif;
    --mono: "IBM Plex Mono", monospace;

    --content-width: 1100px;
    --reading-width: 960px;

}


/* ---------------------------------------------------------
   2. RESET
   --------------------------------------------------------- */

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

html {
    margin: 0;
    padding: 0;
    background: var(--bg);
}

body {
    margin: 0;
    padding: 0;

    background:
        linear-gradient(
            180deg,
            var(--bg-deep) 0%,
            var(--bg) 35%,
            var(--bg) 100%
        );

    color: var(--text);

    font-family: var(--body);
    font-size: 18px;
    line-height: 1.7;

    min-height: 100vh;
}


/* ---------------------------------------------------------
   3. GLOBAL ELEMENTS
   --------------------------------------------------------- */

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

::selection {
    background: var(--accent);
    color: #111;
}


/* ---------------------------------------------------------
   4. HEADER
   --------------------------------------------------------- */

.site-header {

    width: 100%;
    max-width: var(--content-width);

    margin: 0 auto;

    padding:
        28px
        32px;

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

    border-bottom: 1px solid var(--border);

}


/* ---------------------------------------------------------
   5. LOGO
   --------------------------------------------------------- */

.site-logo {

    font-family: var(--display);

    font-size: 1.8rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    color: var(--text);

    transition:
        color 0.2s ease,
        opacity 0.2s ease;

}

.site-logo:hover {
    color: var(--accent);
}


/* ---------------------------------------------------------
   6. SEARCH
   --------------------------------------------------------- */

.flipcord-search {

    display: flex;
    align-items: center;

    margin-left: auto;
    margin-right: 28px;

    font-family: var(--mono);

    font-size: 0.75rem;
    letter-spacing: 0.08em;

}


/* ---------------------------------------------------------
   7. LANGUAGE SWITCHER
   --------------------------------------------------------- */

.language-switcher {

    display: flex;
    align-items: center;
    gap: 18px;

    font-family: var(--mono);

    font-size: 0.75rem;
    letter-spacing: 0.08em;

}

.language-switcher a {

    color: var(--text-muted);

    transition:
        color 0.2s ease;

}

.language-switcher a:hover,
.language-switcher a.active {

    color: var(--text);

}

.language-switcher a.active {

    color: var(--accent);

}


/* ---------------------------------------------------------
   8. MAIN
   --------------------------------------------------------- */

.site-main {

    width: 100%;
    max-width: var(--content-width);

    margin: 0 auto;

    padding:
        80px
        32px
        120px;

}


/* ---------------------------------------------------------
   9. HERO
   --------------------------------------------------------- */

.hero {

    max-width: var(--reading-width);

    margin: 0 auto;

}


/* small technical label */

.hero-label {

    margin-bottom: 20px;

    font-family: var(--mono);

    font-size: 0.75rem;
    font-weight: 500;

    letter-spacing: 0.14em;

    color: var(--accent);

}


/* main title */

.hero h1 {

    margin: 0 0 60px;

    font-family: var(--display);

    font-size: clamp(3.2rem, 6vw, 5.5rem);

    font-weight: 600;

    line-height: 0.92;

    letter-spacing: -0.025em;

    color: #f0eee8;

}


/* ---------------------------------------------------------
   10. ARTICLE CONTENT
   --------------------------------------------------------- */

.hero-content {

    font-family: var(--body);

    font-size: 1.15rem;
    line-height: 1.75;

    color: var(--text);

}

.hero-content p {

    margin:
        0
        0
        1.5rem;

}

.hero-content strong {

    color: #f0eee8;

    font-weight: 600;

}


/* headings inside Markdown */

.hero-content h2 {

    margin:
        4rem
        0
        1.5rem;

    font-family: var(--display);

    font-size: 2.6rem;

    font-weight: 600;

    line-height: 1;

    color: #f0eee8;

}

.hero-content h3 {

    margin:
        3rem
        0
        1rem;

    font-family: var(--display);

    font-size: 1.8rem;

    font-weight: 600;

}


/* ---------------------------------------------------------
   11. IMAGES
   --------------------------------------------------------- */

.hero-content img {

    display: block;

    width: min(100%, 440px);

    float: right;

    margin:
        0
        0
        1rem
        1rem;

    border:
        1px solid var(--border);

}


/* ---------------------------------------------------------
   12. LINKS
   --------------------------------------------------------- */

.hero-content a {

    color: var(--accent);

    border-bottom:
        1px solid
        rgba(214, 166, 44, 0.4);

    transition:
        border-color 0.2s ease,
        color 0.2s ease;

}

.hero-content a:hover {

    color: #f0c85a;

    border-color: var(--accent);

}


/* ---------------------------------------------------------
   13. FOOTER
   --------------------------------------------------------- */

.site-footer {

    width: 100%;
    max-width: var(--content-width);

    margin: 0 auto;

    padding:
        0
        32px
        50px;

    font-family: var(--mono);

    font-size: 0.72rem;

    letter-spacing: 0.08em;

    color: var(--text-muted);

}

.footer-line {

    height: 1px;

    margin-bottom: 24px;

    background: var(--border);

}

.site-footer p {

    margin: 0 0 6px;

    color: var(--text-soft);

}

.site-footer span {

    color: var(--text-muted);

}


/* ---------------------------------------------------------
   14. MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .site-header {

        padding:
            22px
            20px;

        align-items: flex-start;

    }

    .site-logo {

        font-size: 1.5rem;

    }

    .language-switcher {

        gap: 10px;

        flex-wrap: wrap;

        justify-content: flex-end;

        max-width: 180px;

    }

    .site-main {

        padding:
            55px
            20px
            80px;

    }

    .hero h1 {

        font-size: clamp(3rem, 16vw, 5rem);

        margin-bottom: 45px;

    }

    .hero-content {

        font-size: 1rem;

    }

    .hero-content h2 {

        font-size: 2.2rem;

    }

    .hero-content img {

        width: 100%;

        float: none;

        margin:
            0
            0
            3rem;

    }

    .site-footer {

        padding:
            0
            20px
            35px;

    }

}