/* ========================================================================== ACADEMIC COMMENTARY THEME Applies to pages using ========================================================================== */ /* =========================== 0. ACADEMIC PAGE BACKGROUND =========================== */ body.commentary { background: #0a0a0a; background-image: linear-gradient(rgba(216,168,64,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(216,168,64,0.015) 1px, transparent 1px); background-size: 32px 32px; --amber: #d8b465; /* Brass tone */ --amber-dark: #9e7c38; /* Muted aged brass */ } /* =========================== 1. TYPOGRAPHY HIERARCHY =========================== */ body.commentary h1, body.commentary h2, body.commentary h3, body.commentary h4 { font-family: Georgia, "Times New Roman", serif; font-variant: small-caps; letter-spacing: 0.04em; font-weight: 500; color: var(--amber); } body.commentary h1 { font-size: 1.8rem; margin-bottom: 0.8rem; } body.commentary h2 { font-size: 1.35rem; margin-top: 2.6rem; margin-bottom: 0.6rem; } body.commentary h3 { font-size: 1.12rem; margin-top: 1.8rem; margin-bottom: 0.4rem; } /* Body text: refined sans-serif */ body.commentary .post-content, body.commentary .post-preview { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.7; font-size: 1.05rem; opacity: 0.92; } /* Metadata: subdued monospace */ body.commentary .post-meta { font-family: ui-monospace, Menlo, Consolas, monospace; opacity: 0.65; font-size: 0.9rem; } /* =========================== 2. PAGE STRUCTURE =========================== */ body.commentary .post-wrapper, body.commentary .commentary-wrapper { background: rgba(15,15,15,0.55); border: 1px solid rgba(216,168,64,0.15); padding: 3rem 2.4rem; border-radius: 4px; margin-top: 140px; max-width: 860px; margin-left: auto; margin-right: auto; box-shadow: inset 0 0 3px rgba(216,168,64,0.06), 0 0 4px rgba(216,168,64,0.08); } /* Manuscript left rule */ body.commentary .post-wrapper { border-left: 3px solid rgba(216,168,64,0.35); padding-left: 2.2rem; } /* =========================== 3. ACADEMIC HEADERS & RULES =========================== */ body.commentary .section-title { font-family: Georgia, "Times New Roman", serif; font-variant: small-caps; color: var(--amber); font-size: 1.4rem; margin-bottom: 2rem; letter-spacing: 0.06em; } /* =========================== 4. CARD / INDEX LIST =========================== */ body.commentary .post-list { display: grid; gap: 1.8rem; } body.commentary .post-card { padding: 1.6rem 1.9rem; background: rgba(0,0,0,0.22); border: 1px solid rgba(216,168,64,0.20); border-radius: 4px; box-shadow: 0 0 4px rgba(216,168,64,0.10), inset 0 0 2px rgba(216,168,64,0.06); transition: transform 120ms ease, box-shadow 120ms ease; } body.commentary .post-card:hover { transform: translateY(-2px); box-shadow: 0 0 8px rgba(216,168,64,0.25); border-color: rgba(216,168,64,0.35); } body.commentary .post-card h2 { font-size: 1.15rem; margin: 0 0 0.4rem; } body.commentary .read-more { display: inline-block; margin-top: 1rem; font-size: 0.85rem; font-variant: small-caps; letter-spacing: 0.06em; text-decoration: none; color: var(--amber); opacity: 0.85; } body.commentary .read-more:hover { opacity: 1; text-decoration: underline; } /* =========================== 5. SECTION NUMBERING =========================== */ body.commentary .post-content h2 { counter-increment: h2; } body.commentary .post-content { counter-reset: h2; } body.commentary .post-content h2::before { content: counter(h2) ". "; color: var(--amber); margin-right: 0.25rem; opacity: 0.9; } /* =========================== 6. EPIGRAPHS =========================== */ body.commentary .epigraph { font-style: italic; opacity: 0.7; margin: 2rem 0 2.5rem; font-size: 1rem; text-align: center; max-width: 55ch; margin-left: auto; margin-right: auto; } /* =========================== 7. FOOTNOTES =========================== */ body.commentary .footnotes { margin-top: 3rem; border-top: 1px solid rgba(216,168,64,0.15); padding-top: 1.5rem; opacity: 0.8; font-size: 0.9rem; } body.commentary .footnotes li { margin-bottom: 0.5rem; } /* =========================== 8. LINK STYLE =========================== */ body.commentary a { color: var(--amber); text-decoration: none; } body.commentary a:hover { text-decoration: underline; } /* ========================================================================== END ========================================================================== */ body.commentary sup a { color: var(--amber); text-decoration: none; padding: 0 2px; } body.commentary sup a:hover { text-decoration: underline; } body.commentary .footnotes a.back-ref { margin-left: 0.5rem; text-decoration: none; opacity: 0.75; font-size: 0.85em; } body.commentary .footnotes a.back-ref:hover { opacity: 1; text-decoration: underline; } article > p { text-indent: 40px; } .styled-table { border-collapse: collapse; margin: 0 auto; } /* Internal borders only */ .styled-table td { border: 1px solid var(--amber); padding: 8px; } /* Remove the outer border by removing borders on the first/last row and first/last cells */ .styled-table tr:first-child td { border-top: none; } .styled-table tr:last-child td { border-bottom: none; } .styled-table td:first-child { border-left: none; } .styled-table td:last-child { border-right: none; } /* First row: bold text + thicker bottom border */ .header-row { font-weight: bold; } .header-row td { border-bottom: 3px solid var(--amber); } .logic-table td:nth-last-child(2), .logic-table th:nth-last-child(2) { border-right: 3px solid var(--amber); /* the bold divider */ } /* .logic-table, .logic-table td, .logic-table th { border: 1px solid var(--amber); border-collapse: collapse; padding: 6px; } */