/* Base typography */
body {
    font-family: 
        "IBM Plex Serif",       /* Primary font */
        Georgia,                /* Similar serif fallback */
        "Times New Roman",      /* Universal fallback */
        Times,
        serif;
    
    font-weight: 400;          /* Regular weight */
    font-size: 18px;           /* Optimal reading size */
    line-height: 1.7;          /* Generous line spacing */
    color: #000;               /* Slightly off-black for better contrast */
    
    max-width: 700px;          /* Optimal line length (50-75 chars) */
    margin: 0 auto;
    padding: 2em 1em;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: "IBM Plex Serif", serif;
    font-weight: 600;          /* Semibold for clear hierarchy */
    line-height: 1.3;
    margin-top: 1.8em;
    margin-bottom: 0.5em;
    color: #111;
}

/* Section headings (like your LaTeX sections) */
section h2 {
    border-bottom: 2px solid #003366;
    padding-bottom: 0.3em;
    margin-top: 2.5em;         /* Extra space before sections */
}

/* Code and technical content */
code, pre, .abnf, .pseudocode, .grammar {
    font-family: 
        "IBM Plex Mono",       /* Matching monospace family */
        "Courier New", 
        Courier, 
        monospace;
    
    font-size: 0.9em;
    line-height: 1.5;
    font-weight: 400;
}

/* Italics for emphasis (matching \emph{}) */
em, i {
    font-style: italic;
    font-weight: 500;          /* Medium italic for better distinction */
}

/* Strong/bold text */
strong, b {
    font-weight: 600;
}

/* Links */
a {
    color: #003366;            /* Matching your header color */
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 51, 102, 0.2);
}

a:hover {
    border-bottom-color: #003366;
}

/* Lists */
ul, ol {
    margin: 1.2em 0;
    padding-left: 2.2em;
}

li {
    margin-bottom: 0.7em;
}

/* Blockquotes and special notes */
.note, .important, .warning {
    font-style: italic;
    padding-left: 1.5em;
    border-left: 3px solid #ddd;
    margin: 1.5em 0;
}

/* Tables */
table {
    font-family: "IBM Plex Serif", serif;
    font-size: 0.95em;
    line-height: 1.6;
    border-collapse: collapse;
    width: 100%;
    margin: 1.5em 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body {
        font-size: 17px;
        line-height: 1.65;
        padding: 1.5em 1em;
    }
    
    section h2 {
        font-size: 1.5em;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 16px;
        line-height: 1.6;
    }
}
.document-header {
    border-bottom: 2px solid #003366;
    padding-bottom: 1em;
    margin-bottom: 2em;
}

.document-title {
    color: #003366;
    font-size: 2.2em;
    margin-bottom: 0.5em;
}

.document-meta {
    color: #666;
    font-size: 0.9em;
    line-height: 1.6;
}

.document-author {
    font-style: normal; /* Override italic default of address */
    margin-bottom: 0.5em;
}

.document-date {
    margin: 0.5em 0;
}

.document-status {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.5em;
    row-gap: 0.25em;
    margin-top: 1em;
    font-size: 0.85em;
}

.document-status dt {
    font-weight: bold;
}

.document-status dd {
    margin: 0;
}

section h2 {
    /* counter-increment: section; */
    margin-top: 2em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.25em;
}

section h2:before {
    /* content: counter(section) " "; */
}

ol, ul {
    margin: 1em 0;
    padding-left: 2em;
}

li {
    margin-bottom: 0.5em;
}

code {
    font-family: monospace;
    background: #f5f5f5;
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-size: 0.9em;
}

#sec-specification-structure ul {
    margin: 1.5em 0;
}

#sec-specification-structure li {
    margin-bottom: 1em;
    padding-left: 0.5em;
}

#sec-specification-structure li strong {
    display: inline-block;
    margin-bottom: 0.25em;
    color: #003366;
}

#sec-specification-structure li em {
    font-style: italic;
    font-weight: 500;
}