/*
Theme Name: Old Skool Nerd Terminal
Theme URI: https://oldskoolnerd.com
Author: Kurt Christ
Author URI: https://oldskoolnerd.com
Description: A BBS/terminal-aesthetic theme for oldskoolnerd.com. Phosphor green on black, monospace everywhere, ASCII art chrome.
Version: 0.3.0
License: GPL-2.0-or-later
Text Domain: oldskoolnerd-terminal
*/

/* ============================================================
   0. Self-hosted webfont
   ============================================================
   JetBrains Mono 400 — FULL Unicode coverage version (not Google's
   subsetted CSS, which omits block elements, box drawing, geometric
   shapes, dingbats — exactly the chars BBS/scene art needs). Single
   ~92KB file covers everything we render, so every glyph comes from
   the same font and sits on the same 1em grid.
   font-display: swap = text shows in fallback immediately, re-renders
   when the webfont arrives — no invisible-text flash. */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
    --osn-bg:           #0a0f0a;
    --osn-bg-elevated:  #0d140d;
    --osn-text:         #e6e6e6;
    --osn-green:        #5fd068;
    --osn-green-dim:    rgba(95, 208, 104, 0.6);
    --osn-green-faint:  rgba(95, 208, 104, 0.4);
    --osn-amber:        #fbbf24;
    --osn-border:       #1f3d20;
    --osn-danger:       #f87171;

    /* JetBrains Mono first — full Unicode coverage including box-drawing
       (╔ ╗ ║ ═) and block elements (█), so browsers never fall back per-glyph.
       Share Tech Mono kept in the stack as an optional aesthetic alternate. */
    --osn-mono: 'JetBrains Mono', 'Share Tech Mono', 'Fira Code', 'IBM Plex Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

    --osn-content-max: 880px;
    --osn-banner-max:  920px;
    --osn-page-pad:    clamp(12px, 4vw, 32px);
    --osn-block-gap:   24px;
}

/* ============================================================
   2. Reset / base
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--osn-bg);
    color-scheme: dark;
}

body {
    margin: 0;
    background: var(--osn-bg);
    color: var(--osn-text);
    font-family: var(--osn-mono);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--osn-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:hover,
a:focus {
    color: var(--osn-text);
    outline: none;
}
a:focus-visible {
    outline: 1px dashed var(--osn-amber);
    outline-offset: 2px;
}

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

::selection {
    background: var(--osn-green);
    color: var(--osn-bg);
}

/* ============================================================
   3. Skip link (accessibility)
   ============================================================ */
.osn-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--osn-amber);
    color: var(--osn-bg);
    padding: 8px 12px;
    z-index: 100;
}
.osn-skip:focus {
    left: 8px;
    top: 8px;
}

/* ============================================================
   4. Page container
   ============================================================ */
.osn-page {
    max-width: var(--osn-content-max);
    margin: 0 auto;
    padding: var(--osn-page-pad);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.osn-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--osn-block-gap);
}

/* ============================================================
   5. Top nav
   ============================================================ */
.osn-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--osn-border);
    font-size: 12px;
}

.osn-nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.osn-nav-links a {
    color: var(--osn-green);
    text-decoration: none;
}
.osn-nav-links a:hover,
.osn-nav-links a:focus {
    color: var(--osn-text);
}
.osn-nav-links .osn-current a {
    color: var(--osn-amber);
}

.osn-nav-counter {
    color: var(--osn-green-dim);
    font-size: 12px;
    white-space: nowrap;
}

/* ============================================================
   6. ASCII banner
   ============================================================ */
.osn-banner {
    display: block;
    /* width: max-content sizes the pre to its widest line; margin: auto then
       centers the BLOCK as a whole. Avoids text-align: center, which would
       center each line independently — disastrous when the lines aren't all
       the same width (the ANSI Shadow O has a leading space on rows 1 + 6
       that makes those rows 1 char shorter than the middle rows). */
    width: max-content;
    max-width: min(100%, var(--osn-banner-max));
    margin: 16px auto 0;
    color: var(--osn-green);
    font-family: var(--osn-mono);
    /* Tuned for a 110-char banner. At narrow viewports the font shrinks so
       the whole logo fits without overflow; on desktops it caps at 11px. */
    font-size: clamp(5px, 1.4vw, 11px);
    line-height: 1.1;
    text-align: left;
    white-space: pre;

    /* CRITICAL for ASCII art: disable every browser optimization that would
       shift glyph widths from their nominal monospace 1em. The body uses
       text-rendering: optimizeLegibility, which applies kerning even to
       monospace fonts and slides box-drawing chars (╔ ╗ ╚ ╝) sideways.
       These overrides force every glyph onto an exact 1em grid. */
    text-rendering: geometricPrecision;
    font-kerning: none;
    font-variant-ligatures: none;
    font-feature-settings: "kern" 0, "liga" 0, "calt" 0, "dlig" 0;
    letter-spacing: 0;
    font-variant: normal;

    /* No overflow handling — the clamped font-size + max-content sizing
       means the banner always fits its container. If it ever doesn't, we
       want it to clip silently, not show a scrollbar. */
    overflow: hidden;
}

.osn-tagline {
    text-align: center;
    color: var(--osn-green-dim);
    font-size: 12px;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* ============================================================
   7. Section heads (the divider lines)
   ============================================================ */
.osn-section-head {
    color: var(--osn-amber);
    font-size: 11px;
    line-height: 1.2;
    margin: 8px 0 12px;
    /* Truncate the divider rule on narrow screens instead of overflowing */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}

/* ============================================================
   8. MOTD block
   ============================================================ */
.osn-motd {
    background: var(--osn-bg-elevated);
    border: 1px solid var(--osn-border);
    padding: 12px 16px;
}

.osn-motd .osn-section-head {
    margin-top: 0;
}

.osn-motd-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.osn-motd-row {
    display: grid;
    grid-template-columns: max-content auto 1fr;
    column-gap: 8px;
    align-items: baseline;
}

.osn-motd-label {
    color: var(--osn-green);
}
.osn-motd-sep {
    color: var(--osn-green-faint);
}
.osn-motd-value {
    color: var(--osn-text);
    word-break: break-word;
}

/* On very narrow screens, stack the value below the label */
@media (max-width: 480px) {
    .osn-motd-row {
        grid-template-columns: max-content auto;
        grid-template-rows: auto auto;
    }
    .osn-motd-value {
        grid-column: 1 / -1;
        padding-left: 12px;
    }
}

/* ============================================================
   9. Project cards
   ============================================================ */
.osn-project-grid {
    display: grid;
    /* auto-fit means the grid picks 1, 2, ... columns based on available width.
       320px minimum per card; on 360px phones we get 1 column, on 760px we get 2. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 12px;
}

.osn-project-card {
    display: block;
    padding: 12px 16px;
    background: var(--osn-bg-elevated);
    border: 1px solid var(--osn-border);
    color: var(--osn-text);
    text-decoration: none;
    transition: border-color 80ms linear;
}
.osn-project-card:hover,
.osn-project-card:focus {
    border-color: var(--osn-green);
    color: var(--osn-text);
}
.osn-project-name {
    color: var(--osn-green);
    font-size: 14px;
    margin-bottom: 4px;
}
.osn-project-tagline {
    color: var(--osn-text);
    font-size: 13px;
    margin-bottom: 6px;
}
.osn-project-count {
    color: var(--osn-green-dim);
    font-size: 11px;
}

/* ============================================================
   10. Devlog list
   ============================================================ */
.osn-devlog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.osn-devlog-item {
    display: grid;
    /* date | tag | title — title wraps freely if long */
    grid-template-columns: max-content max-content 1fr;
    column-gap: 10px;
    align-items: baseline;
}

.osn-devlog-date {
    color: var(--osn-green-dim);
    white-space: nowrap;
}
.osn-devlog-tag {
    color: var(--osn-amber);
    white-space: nowrap;
}
.osn-devlog-title {
    color: var(--osn-text);
    text-decoration: none;
    word-break: break-word;
}
.osn-devlog-title:hover,
.osn-devlog-title:focus {
    color: var(--osn-green);
    text-decoration: underline;
}

.osn-devlog-empty {
    color: var(--osn-green-dim);
    font-style: normal;
}

.osn-devlog-more {
    margin-top: 10px;
    font-size: 12px;
    color: var(--osn-amber);
}
.osn-devlog-more a {
    color: var(--osn-amber);
    text-decoration: none;
}
.osn-devlog-more a:hover,
.osn-devlog-more a:focus {
    color: var(--osn-text);
}

/* On the narrowest screens, stack devlog rows so titles get full width */
@media (max-width: 420px) {
    .osn-devlog-item {
        grid-template-columns: max-content 1fr;
        grid-template-rows: auto auto;
    }
    .osn-devlog-title {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   11. Footer + blinking cursor
   ============================================================ */
.osn-footer {
    margin-top: var(--osn-block-gap);
    padding: 0 0 16px;
    /* Three rows stacked top→bottom: section head, nav, meta line */
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
    color: var(--osn-green-dim);
}

.osn-footer-head {
    /* Inherits the amber color/size from .osn-section-head */
    margin: 0;
}

.osn-footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.osn-footer-nav a {
    color: var(--osn-green);
    text-decoration: none;
}
.osn-footer-nav a:hover,
.osn-footer-nav a:focus {
    color: var(--osn-text);
}

.osn-footer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}

.osn-footer-right {
    color: var(--osn-green);
}

.osn-prompt {
    color: var(--osn-green);
    margin-right: 4px;
}

/* CSS-only blink — no JS required */
.osn-cursor {
    display: inline-block;
    color: var(--osn-green);
    animation: osn-blink 1.06s steps(2, jump-none) infinite;
}

@keyframes osn-blink {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .osn-cursor {
        animation: none;
    }
}

/* ============================================================
   12. Single post (header, content, prev/next nav)
   ============================================================ */
.osn-post-header {
    margin-bottom: 12px;
}

.osn-post-title {
    color: var(--osn-green);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 6px;
}

.osn-post-meta {
    color: var(--osn-green-dim);
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
}

.osn-post-meta a {
    color: var(--osn-green-dim);
    text-decoration: none;
}
.osn-post-meta a:hover,
.osn-post-meta a:focus {
    color: var(--osn-green);
}

.osn-meta-sep {
    color: var(--osn-green-faint);
}

.osn-post-thumb {
    margin: 0 0 16px;
    border: 1px solid var(--osn-border);
}

.osn-post-thumb img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Post body typography --- */
.osn-post-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--osn-text);
}

.osn-post-content > * + * {
    margin-top: 1em;
}

.osn-post-content p {
    margin: 0 0 1em;
}

.osn-post-content a {
    color: var(--osn-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.osn-post-content a:hover,
.osn-post-content a:focus {
    color: var(--osn-text);
}

/* Headings inside posts: prefix with terminal-style markdown markers via
   ::before pseudo-element so the source HTML stays clean. */
.osn-post-content h2,
.osn-post-content h3,
.osn-post-content h4,
.osn-post-content h5 {
    color: var(--osn-green);
    font-weight: 400;
    line-height: 1.3;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.osn-post-content h2 { font-size: 18px; }
.osn-post-content h3 { font-size: 16px; }
.osn-post-content h4 { font-size: 15px; }
.osn-post-content h5 { font-size: 14px; }

.osn-post-content h2::before { content: "## ";   color: var(--osn-amber); }
.osn-post-content h3::before { content: "### ";  color: var(--osn-amber); }
.osn-post-content h4::before { content: "#### "; color: var(--osn-amber); }
.osn-post-content h5::before { content: "##### "; color: var(--osn-amber); }

/* Lists with terminal-style bullets */
.osn-post-content ul,
.osn-post-content ol {
    margin: 0 0 1em;
    padding-left: 0;
    list-style: none;
}

.osn-post-content ul li,
.osn-post-content ol li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: 0.3em;
}

.osn-post-content ul li::before {
    content: "▸";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--osn-amber);
}

/* Ordered lists keep numeric markers, but in green */
.osn-post-content ol {
    counter-reset: osn-list;
}
.osn-post-content ol li {
    counter-increment: osn-list;
}
.osn-post-content ol li::before {
    content: counter(osn-list) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--osn-amber);
    font-variant-numeric: tabular-nums;
}

/* Nested lists */
.osn-post-content li ul,
.osn-post-content li ol {
    margin: 0.3em 0 0.3em;
}

/* Code: inline + blocks */
.osn-post-content code {
    color: var(--osn-amber);
    font-family: var(--osn-mono);
    font-size: 0.95em;
    background: transparent;
    padding: 0;
}

.osn-post-content pre {
    background: var(--osn-bg-elevated);
    border: 1px solid var(--osn-border);
    padding: 12px 14px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre;
}

.osn-post-content pre code {
    color: var(--osn-text);
    font-size: inherit;
    background: transparent;
}

/* Blockquotes — left rail in green, slightly muted text */
.osn-post-content blockquote {
    margin: 1em 0;
    padding: 0.2em 0 0.2em 14px;
    border-left: 3px solid var(--osn-green);
    color: var(--osn-green-dim);
    font-style: normal;
}

.osn-post-content blockquote p {
    margin: 0 0 0.4em;
}
.osn-post-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Images inside post content */
.osn-post-content img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--osn-border);
    display: block;
}

.osn-post-content figure {
    margin: 1em 0;
}

.osn-post-content figcaption {
    color: var(--osn-green-dim);
    font-size: 12px;
    margin-top: 6px;
    padding-left: 4px;
    border-left: 2px solid var(--osn-border);
}

/* Horizontal rule rendered as ASCII separator */
.osn-post-content hr {
    border: 0;
    height: 1px;
    background: var(--osn-border);
    margin: 1.6em 0;
}

/* Tables — kept simple, terminal-styled */
.osn-post-content table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
    margin: 1em 0;
}

.osn-post-content th,
.osn-post-content td {
    border: 1px solid var(--osn-border);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}

.osn-post-content th {
    color: var(--osn-amber);
    font-weight: 400;
    background: var(--osn-bg-elevated);
}

/* WordPress paginated post links (rare but supported) */
.osn-post-content .osn-page-links {
    margin-top: 1em;
    color: var(--osn-green-dim);
    font-size: 12px;
}
.osn-post-content .osn-page-links a {
    color: var(--osn-amber);
    text-decoration: none;
    margin: 0 4px;
}

/* WordPress block: gallery/embed/etc. — minimal coverage so they don't break */
.osn-post-content .wp-block-image img {
    border: 1px solid var(--osn-border);
}

.osn-post-content .alignleft  { float: left;  margin: 0 1em 0.6em 0; max-width: 50%; }
.osn-post-content .alignright { float: right; margin: 0 0 0.6em 1em; max-width: 50%; }
.osn-post-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* --- Prev / next post navigation --- */
.osn-post-nav {
    margin-top: var(--osn-block-gap);
    padding: 12px 0;
    border-top: 1px solid var(--osn-border);
    border-bottom: 1px solid var(--osn-border);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    font-size: 13px;
}

.osn-post-nav a {
    color: var(--osn-green);
    text-decoration: none;
}
.osn-post-nav a:hover,
.osn-post-nav a:focus {
    color: var(--osn-text);
}

.osn-post-nav-prev:empty::after,
.osn-post-nav-next:empty::after {
    content: "";
}

@media (max-width: 480px) {
    .osn-post-nav {
        flex-direction: column;
        gap: 4px;
    }
}

/* ============================================================
   13. Archive / search / 404
   ============================================================ */
.osn-archive-header {
    margin-bottom: 16px;
}

.osn-archive-header .osn-section-head {
    margin: 0 0 8px;
}

.osn-archive-desc {
    color: var(--osn-green-dim);
    font-size: 12px;
}

.osn-archive-desc p {
    margin: 0;
}

.osn-no-posts {
    color: var(--osn-green-dim);
    font-size: 14px;
    line-height: 1.6;
}

.osn-no-posts a {
    color: var(--osn-amber);
    text-decoration: none;
}
.osn-no-posts a:hover,
.osn-no-posts a:focus {
    color: var(--osn-text);
}

/* WordPress's the_posts_pagination outputs:
   <nav class="navigation pagination">
     <h2 class="screen-reader-text">...</h2>
     <div class="nav-links">
       <a class="prev page-numbers">...</a>
       <a class="page-numbers">1</a>
       <span class="page-numbers current">2</span>
       <a class="next page-numbers">...</a>
     </div>
   </nav> */
.navigation.pagination {
    margin-top: var(--osn-block-gap);
    padding-top: 12px;
    border-top: 1px solid var(--osn-border);
    font-size: 13px;
}

.navigation.pagination .screen-reader-text {
    /* Already off-screen via WP's default; reinforce */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
}

.navigation.pagination .page-numbers {
    color: var(--osn-green);
    text-decoration: none;
    padding: 2px 6px;
}

.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus {
    color: var(--osn-text);
}

.navigation.pagination .page-numbers.current {
    color: var(--osn-amber);
    background: transparent;
}

.navigation.pagination .page-numbers.dots {
    color: var(--osn-green-faint);
}

/* ============================================================
   14. 404
   ============================================================ */
.osn-404 .osn-section-head {
    color: var(--osn-danger);
    margin-bottom: 12px;
}

.osn-404-output {
    background: var(--osn-bg-elevated);
    border: 1px solid var(--osn-border);
    padding: 14px 16px;
    font-family: var(--osn-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--osn-text);
    white-space: pre-wrap;
    margin: 0 0 16px;
}

.osn-404-output .osn-prompt {
    color: var(--osn-green);
}

.osn-404-help {
    color: var(--osn-green-dim);
    font-size: 14px;
    line-height: 1.7;
}

.osn-404-help a {
    color: var(--osn-amber);
    text-decoration: none;
}
.osn-404-help a:hover,
.osn-404-help a:focus {
    color: var(--osn-text);
}

/* ============================================================
   15. Comments
   ============================================================ */
.osn-comments {
    margin-top: var(--osn-block-gap);
}

.osn-comments .osn-section-head {
    margin-top: 0;
    margin-bottom: 12px;
}

.osn-comments-meta {
    color: var(--osn-green-dim);
    font-size: 12px;
    margin-bottom: 12px;
}

.osn-comments-closed {
    color: var(--osn-green-dim);
    font-size: 13px;
    margin: 8px 0;
}

/* WP-rendered <ol class="osn-comment-list"> */
.osn-comment-list,
.osn-comment-list .children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.osn-comment-list .children {
    /* Threaded replies indent — left rail in dim green */
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--osn-border);
    margin-top: 12px;
}

.osn-comment {
    padding: 0;
    margin: 0 0 16px;
}

.osn-comment-body {
    background: var(--osn-bg-elevated);
    border: 1px solid var(--osn-border);
    padding: 10px 14px;
}

.osn-comment-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    font-size: 12px;
    color: var(--osn-green);
    margin-bottom: 8px;
}

.osn-comment-author {
    color: var(--osn-amber);
}

.osn-comment-date {
    color: var(--osn-green-dim);
}

.osn-comment-pending {
    color: var(--osn-danger);
    font-size: 11px;
}

.osn-comment-content {
    color: var(--osn-text);
    font-size: 14px;
    line-height: 1.6;
}

.osn-comment-content p {
    margin: 0 0 0.7em;
}
.osn-comment-content p:last-child {
    margin-bottom: 0;
}

.osn-comment-content a {
    color: var(--osn-green);
}

.osn-comment-footer {
    margin-top: 8px;
    font-size: 12px;
    color: var(--osn-green-dim);
}

.osn-comment-footer a {
    color: var(--osn-green);
    text-decoration: none;
    margin-right: 8px;
}
.osn-comment-footer a:hover,
.osn-comment-footer a:focus {
    color: var(--osn-text);
}

/* Bypassed pingback/trackback — short-form */
.osn-comment.pingback,
.osn-comment.trackback {
    font-size: 12px;
    color: var(--osn-green-dim);
}
.osn-comment.pingback .osn-comment-body,
.osn-comment.trackback .osn-comment-body {
    background: transparent;
    border: 1px dashed var(--osn-border);
}

/* --- Reply form ---
   Target both our custom .osn-comment-form class AND WordPress's default
   .comment-form class — the comment_form() args for class overrides aren't
   reliable across WP versions, so we target both for safety. */
.osn-comment-form,
.comment-form,
.comment-respond {
    margin-top: var(--osn-block-gap);
    color: var(--osn-text);
}

.comment-reply-title {
    color: var(--osn-amber);
    font-family: var(--osn-mono);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.comment-reply-title small a,
.comment-reply-title a {
    color: var(--osn-green);
    text-decoration: none;
    font-size: 12px;
}
.comment-reply-title a:hover,
.comment-reply-title a:focus {
    color: var(--osn-text);
}

.osn-comment-notes,
.osn-comment-logged-in,
.comment-form .comment-notes,
.comment-form .logged-in-as,
.comment-form .comment-form-privacy-notice,
.comment-form .akismet_comment_form_privacy_notice,
.akismet_comment_form_privacy_notice {
    color: var(--osn-green-dim);
    font-size: 12px;
    margin: 0 0 12px;
    line-height: 1.5;
}

.osn-comment-logged-in a,
.comment-form .logged-in-as a,
.comment-form .comment-form-privacy-notice a,
.comment-form .akismet_comment_form_privacy_notice a,
.akismet_comment_form_privacy_notice a {
    color: var(--osn-green);
}

.osn-comment-form .comment-form-comment,
.osn-comment-form .comment-form-author,
.osn-comment-form .comment-form-email,
.osn-comment-form .comment-form-url,
.osn-comment-form .comment-form-cookies-consent,
.comment-form .comment-form-comment,
.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url,
.comment-form .comment-form-cookies-consent {
    margin-bottom: 10px;
}

.osn-comment-form label,
.comment-form label {
    display: block;
    font-family: var(--osn-mono);
    font-size: 12px;
    color: var(--osn-green);
    margin-bottom: 4px;
}

.osn-comment-form input[type="text"],
.osn-comment-form input[type="email"],
.osn-comment-form input[type="url"],
.osn-comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    background: var(--osn-bg);
    color: var(--osn-text);
    border: 1px solid var(--osn-border);
    border-radius: 0;
    padding: 8px 10px;
    font-family: var(--osn-mono);
    font-size: 13px;
    line-height: 1.5;
    box-sizing: border-box;
}

.osn-comment-form input:focus,
.osn-comment-form textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--osn-green);
}

.osn-comment-form textarea,
.comment-form textarea {
    min-height: 110px;
    resize: vertical;
    white-space: pre-wrap;
}

.osn-comment-form .comment-form-cookies-consent label,
.comment-form .comment-form-cookies-consent label {
    display: inline-block;
    margin-left: 6px;
    color: var(--osn-green-dim);
}
.osn-comment-form .comment-form-cookies-consent input,
.comment-form .comment-form-cookies-consent input {
    width: auto;
}

.osn-comment-form .form-submit,
.comment-form .form-submit {
    margin-top: 12px;
}

.osn-comment-submit,
.osn-comment-form input[type="submit"],
.comment-form input[type="submit"],
#submit {
    background: transparent;
    color: var(--osn-amber);
    border: 1px solid var(--osn-amber);
    border-radius: 0;
    padding: 6px 14px;
    font-family: var(--osn-mono);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: background 80ms linear, color 80ms linear;
    -webkit-appearance: none;
    appearance: none;
}

.osn-comment-submit:hover,
.osn-comment-submit:focus,
.osn-comment-form input[type="submit"]:hover,
.osn-comment-form input[type="submit"]:focus,
.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus,
#submit:hover,
#submit:focus {
    background: var(--osn-amber);
    color: var(--osn-bg);
    outline: none;
}

/* WP "must log in to comment" notice */
.must-log-in {
    color: var(--osn-green-dim);
    font-size: 13px;
}
.must-log-in a {
    color: var(--osn-green);
}

/* ============================================================
   16. Tablet / desktop refinements
   ============================================================ */
@media (min-width: 640px) {
    .osn-motd-body {
        font-size: 14px;
    }
    .osn-devlog-list {
        font-size: 14px;
    }
}