@import url('tokens/index.css');

/* Native library article: a token-inked reading column. Uploaded articles
   carry inline color styles from word-processor pastes, so the ink rules
   use !important to defeat them -- otherwise pasted blacks land on the
   dark page surface. */

#content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-10) var(--space-4) var(--space-12);
}

#content-container h1 {
    font-size: var(--text-4xl);
    color: var(--ink-primary);
    max-width: var(--container-md);
    width: 100%;
    margin: 0 0 var(--space-2);
}

.content-byline {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-subtle);
    max-width: var(--container-md);
    width: 100%;
    margin: 0 0 var(--space-8);
}

#content {
    max-width: var(--container-md);
    width: 100%;
    color: var(--ink-secondary) !important;
}

#content * {
    color: var(--ink-secondary) !important;
    background: transparent !important;
    font-family: var(--font-display) !important;
}

#content p,
#content li {
    font-size: var(--text-base);
    line-height: 1.7;
}

/* styles.css resets ul globally (list-style none, centered); uploaded
   article HTML can contain lists, so restore them inside the column. */
#content ul {
    list-style-type: disc;
    text-align: left;
    padding-left: var(--space-5);
    margin: var(--space-3) 0;
}

#content h1,
#content h2,
#content h3,
#content h4 {
    color: var(--ink-primary) !important;
}

#content a,
#content a * {
    color: var(--accent) !important;
    text-decoration: none;
}

#content a:hover,
#content a:hover * {
    text-decoration: underline;
}

#content img {
    max-width: 100%;
    height: auto;
}

.content-back-link {
    display: inline-block;
    margin-top: var(--space-8);
    color: var(--accent);
    text-decoration: none;
}

.content-back-link:hover {
    text-decoration: underline;
}