/*
 * THE METALLIC COMPLEX
 * Dark Industrial Aesthetic
 * "Robert Howard × Neal Stephenson"
 *
 * Colors derived from metallurgy: coal, iron, steel, copper, mercury
 * Muscular typography, dense information, primal energy
 */

/* ============================================
   COLOR PALETTE
   ============================================ */
:root {
    /* Base metals */
    --coal: #1a1a1a;
    --soot: #0f0f0f;
    --iron: #2b2d31;
    --steel: #3d4451;
    --mercury: #c0c0c0;
    --ash: #6b6b6b;

    /* Accent metals */
    --copper: #b87333;
    --rust: #a0522d;
    --verdigris: #43b3ae;
    --gold: #c9a227;

    /* Functional */
    --fire: #d4621e;
    --forge: #8b0000;

    /* Semantic mappings */
    --bg-primary: var(--coal);
    --bg-secondary: var(--iron);
    --bg-elevated: var(--steel);
    --text-primary: var(--mercury);
    --text-muted: var(--ash);
    --accent: var(--copper);
    --link: var(--verdigris);
    --link-hover: var(--gold);
    --warning: var(--fire);
    --danger: var(--forge);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;

    /* Typography - IBM Plex for industrial scholarly aesthetic */
    --font-mono: 'IBM Plex Mono', 'Courier New', 'Courier', monospace;
    --font-sans: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-mono);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono);
    font-weight: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

h1 {
    font-size: 2rem;
    border-bottom: 2px solid var(--copper);
    padding-bottom: var(--space-sm);
}

h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid var(--steel);
    padding-bottom: var(--space-sm);
}

h3 {
    font-size: 1.25rem;
    color: var(--copper);
}

p {
    margin-bottom: var(--space-md);
}

a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--link-hover);
    border-bottom-color: var(--link-hover);
}

blockquote {
    border-left: 3px solid var(--copper);
    padding-left: var(--space-md);
    margin: var(--space-lg) 0;
    color: var(--text-muted);
    font-style: italic;
}

hr {
    border: none;
    height: 1px;
    background: var(--steel);
    margin: var(--space-lg) 0;
}

/* ============================================
   LAYOUT
   ============================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.main {
    flex: 1;
    padding: var(--space-xl) 0;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.site-header {
    background: var(--soot);
    border-bottom: 1px solid var(--steel);
    padding: var(--space-md) 0;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.nav__brand {
    border-bottom: none;
}

.nav__title {
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: var(--copper);
}

.nav__title:hover {
    color: var(--gold);
}

.nav__links {
    display: flex;
    list-style: none;
    gap: var(--space-lg);
}

.nav__links a {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    border-bottom: none;
}

.nav__links a:hover {
    color: var(--text-primary);
}

.nav__auth {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.nav__auth a {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

/* Mobile nav toggle */
.nav__toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--ash);
    padding: var(--space-sm);
    cursor: pointer;
    order: 2;
}

.nav__toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--mercury);
    margin: 4px 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav__toggle:hover {
    border-color: var(--copper);
}

.nav__toggle:hover .nav__toggle-bar {
    background: var(--copper);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--soot);
    border-top: 1px solid var(--steel);
    padding: var(--space-lg) 0;
    text-align: center;
}

.footer__text {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--space-sm);
}

.footer__links {
    font-size: 0.8rem;
}

.footer__links a {
    color: var(--ash);
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--steel);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.card__header {
    border-bottom: 1px solid var(--ash);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
}

.card__title {
    margin-bottom: 0;
}

.card__meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-block;
    padding: 0.75em 1.5em;
    background: var(--steel);
    color: var(--text-primary);
    border: 1px solid var(--ash);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    font-family: var(--font-mono);
    transition: all 0.3s ease;
    border-bottom: none;
}

.btn:hover {
    background: var(--bg-elevated);
    border-color: var(--copper);
    color: var(--copper);
}

.btn--accent {
    background: var(--copper);
    border-color: var(--copper);
    color: var(--coal);
}

.btn--accent:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--coal);
}

.btn--danger {
    background: var(--forge);
    border-color: var(--forge);
}

.btn--danger:hover {
    background: var(--fire);
    border-color: var(--fire);
}

/* ============================================
   FORMS
   ============================================ */
.form-group {
    margin-bottom: var(--space-lg);
}

label {
    display: block;
    margin-bottom: var(--space-sm);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select {
    width: 100%;
    padding: var(--space-md);
    background: var(--soot);
    border: 1px solid var(--steel);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--copper);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

.helptext {
    display: block;
    margin-top: var(--space-xs);
    font-size: 0.8rem;
    color: var(--ash);
}

.errorlist {
    list-style: none;
    color: var(--fire);
    font-size: 0.85rem;
    margin-top: var(--space-xs);
}

/* ============================================
   MESSAGES
   ============================================ */
.messages {
    margin-bottom: var(--space-lg);
}

.message {
    padding: var(--space-md);
    border-left: 3px solid var(--copper);
    background: var(--bg-secondary);
    margin-bottom: var(--space-sm);
}

.message--success {
    border-color: var(--verdigris);
}

.message--error {
    border-color: var(--fire);
}

.message--warning {
    border-color: var(--gold);
}

/* ============================================
   VOTING
   ============================================ */
.vote {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.vote__btn {
    background: transparent;
    border: 1px solid var(--ash);
    color: var(--ash);
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.vote__btn:hover {
    border-color: var(--copper);
    color: var(--copper);
}

.vote__btn--up:hover,
.vote__btn--up.active {
    border-color: var(--verdigris);
    color: var(--verdigris);
}

.vote__btn--down:hover,
.vote__btn--down.active {
    border-color: var(--fire);
    color: var(--fire);
}

.vote__score {
    font-weight: bold;
    color: var(--copper);
    min-width: 2em;
    text-align: center;
}

/* ============================================
   CODE
   ============================================ */
pre {
    background: var(--soot);
    border-left: 3px solid var(--copper);
    padding: var(--space-md);
    overflow-x: auto;
    margin: var(--space-lg) 0;
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--verdigris);
}

pre code {
    color: var(--text-primary);
}

/* Pygments code highlighting */
.codehilite .hll { background-color: var(--steel) }
.codehilite .c { color: var(--ash) } /* Comment */
.codehilite .k { color: var(--verdigris) } /* Keyword */
.codehilite .o { color: var(--mercury) } /* Operator */
.codehilite .cm { color: var(--ash) } /* Comment.Multiline */
.codehilite .cp { color: var(--gold) } /* Comment.Preproc */
.codehilite .c1 { color: var(--ash) } /* Comment.Single */
.codehilite .cs { color: var(--ash) } /* Comment.Special */
.codehilite .gd { color: var(--fire) } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .gr { color: var(--fire) } /* Generic.Error */
.codehilite .gh { color: var(--copper); font-weight: bold } /* Generic.Heading */
.codehilite .gi { color: var(--verdigris) } /* Generic.Inserted */
.codehilite .go { color: var(--ash) } /* Generic.Output */
.codehilite .gp { color: var(--copper); font-weight: bold } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: var(--copper); font-weight: bold } /* Generic.Subheading */
.codehilite .gt { color: var(--fire) } /* Generic.Traceback */
.codehilite .kc { color: var(--verdigris) } /* Keyword.Constant */
.codehilite .kd { color: var(--verdigris) } /* Keyword.Declaration */
.codehilite .kn { color: var(--verdigris) } /* Keyword.Namespace */
.codehilite .kp { color: var(--verdigris) } /* Keyword.Pseudo */
.codehilite .kr { color: var(--verdigris) } /* Keyword.Reserved */
.codehilite .kt { color: var(--gold) } /* Keyword.Type */
.codehilite .m { color: var(--copper) } /* Literal.Number */
.codehilite .s { color: var(--rust) } /* Literal.String */
.codehilite .na { color: var(--verdigris) } /* Name.Attribute */
.codehilite .nb { color: var(--mercury) } /* Name.Builtin */
.codehilite .nc { color: var(--gold) } /* Name.Class */
.codehilite .no { color: var(--copper) } /* Name.Constant */
.codehilite .nd { color: var(--gold) } /* Name.Decorator */
.codehilite .ni { color: var(--mercury) } /* Name.Entity */
.codehilite .ne { color: var(--fire) } /* Name.Exception */
.codehilite .nf { color: var(--gold) } /* Name.Function */
.codehilite .nl { color: var(--mercury) } /* Name.Label */
.codehilite .nn { color: var(--gold) } /* Name.Namespace */
.codehilite .nt { color: var(--verdigris) } /* Name.Tag */
.codehilite .nv { color: var(--mercury) } /* Name.Variable */
.codehilite .ow { color: var(--verdigris) } /* Operator.Word */
.codehilite .w { color: var(--ash) } /* Text.Whitespace */
.codehilite .mf { color: var(--copper) } /* Literal.Number.Float */
.codehilite .mh { color: var(--copper) } /* Literal.Number.Hex */
.codehilite .mi { color: var(--copper) } /* Literal.Number.Integer */
.codehilite .mo { color: var(--copper) } /* Literal.Number.Oct */
.codehilite .sb { color: var(--rust) } /* Literal.String.Backtick */
.codehilite .sc { color: var(--rust) } /* Literal.String.Char */
.codehilite .sd { color: var(--ash) } /* Literal.String.Doc */
.codehilite .s2 { color: var(--rust) } /* Literal.String.Double */
.codehilite .se { color: var(--copper) } /* Literal.String.Escape */
.codehilite .sh { color: var(--rust) } /* Literal.String.Heredoc */
.codehilite .si { color: var(--copper) } /* Literal.String.Interpol */
.codehilite .sx { color: var(--rust) } /* Literal.String.Other */
.codehilite .sr { color: var(--verdigris) } /* Literal.String.Regex */
.codehilite .s1 { color: var(--rust) } /* Literal.String.Single */
.codehilite .ss { color: var(--gold) } /* Literal.String.Symbol */
.codehilite .bp { color: var(--mercury) } /* Name.Builtin.Pseudo */
.codehilite .vc { color: var(--mercury) } /* Name.Variable.Class */
.codehilite .vg { color: var(--mercury) } /* Name.Variable.Global */
.codehilite .vi { color: var(--mercury) } /* Name.Variable.Instance */
.codehilite .il { color: var(--copper) } /* Literal.Number.Integer.Long */

/* ============================================
   ARTICLE LIST
   ============================================ */
.article-list {
    list-style: none;
}

.article-item {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--steel);
}

.article-item:last-child {
    border-bottom: none;
}

.article-item__title {
    margin-bottom: var(--space-xs);
}

.article-item__title a {
    color: var(--text-primary);
    border-bottom: none;
}

.article-item__title a:hover {
    color: var(--copper);
}

.article-item__meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.article-item__excerpt {
    color: var(--ash);
}

/* ============================================
   TAGS
   ============================================ */
.tag {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background: var(--steel);
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: none;
    margin-right: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.tag:hover {
    background: var(--copper);
    color: var(--coal);
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

.pagination__link {
    padding: var(--space-sm) var(--space-md);
    background: var(--steel);
    color: var(--text-primary);
    border-bottom: none;
}

.pagination__link:hover {
    background: var(--copper);
    color: var(--coal);
}

.pagination__link--current {
    background: var(--copper);
    color: var(--coal);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    :root {
        font-size: 14px;
    }

    .nav {
        flex-wrap: wrap;
    }

    .nav__brand {
        order: 1;
    }

    .nav__toggle {
        display: block;
        order: 2;
    }

    .nav__links {
        display: none;
        width: 100%;
        order: 3;
        flex-direction: column;
        text-align: center;
        padding: var(--space-md) 0;
        gap: var(--space-md);
        border-top: 1px solid var(--steel);
        margin-top: var(--space-md);
    }

    .nav__links--open {
        display: flex;
    }

    .nav__auth {
        display: none;
        width: 100%;
        order: 4;
        justify-content: center;
        padding-top: var(--space-md);
        border-top: 1px solid var(--steel);
    }

    .nav__auth--open {
        display: flex;
    }

    /* Toggle animation when open */
    .nav__toggle--open .nav__toggle-bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav__toggle--open .nav__toggle-bar:nth-child(2) {
        opacity: 0;
    }

    .nav__toggle--open .nav__toggle-bar:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .container {
        padding: 0 var(--space-md);
    }

    h1 {
        font-size: 1.5rem;
    }
}