:root {
    /* Palette */
    --bg:          #0a0c10;
    --bg-elev:     #12151b;
    --bg-inset:    #07080b;
    --fg:          #e8e4dc;
    --fg-muted:    #8a8579;
    --fg-faint:    #5a554b;
    --border:      #1a1e25;
    --border-rule: #262b34;
    --accent:      #c9a96e;
    --accent-dim:  #6b5a3a;
    --phosphor:     #7eecb5;  /* structural only - frames and hairlines, never text */
    --phosphor-dim: #2f5a44;

    /* Kind palette: one color per content kind. Each carries a distinct hue family
       so kinds read at a glance without overlapping phosphor (which tags own). */
    --kind-post:         #d4b878;  /* warm gold - default voice */
    --kind-newsletter:   #6ab7ff;  /* soft blue - broadcast */
    --kind-contribution: #ff9966;  /* warm coral - handoff */
    --kind-dispatch:     #d97ee0;  /* magenta - signal flare */
    --kind-tutorial:     #4cc4c0;  /* teal - a guided path */

    /* Type */
    --font-serif:  "Iowan Old Style", "Charter", Georgia, serif;
    --font-sans:   system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:   "JetBrains Mono", "Fira Code", "SF Mono", Menlo, monospace;
    --text-base:   18px;
    --leading:     1.65;
    --measure:      66ch;   /* reading column for articles */
    --measure-wide: 72rem;  /* layout container for chrome + index */

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 6rem;
}

/* ─── Reset + base ──────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
    color-scheme: dark;
    scroll-behavior: smooth;
}

::selection {
    background: var(--accent-dim);
    color: var(--fg);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-serif);
    font-size: var(--text-base);
    line-height: var(--leading);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ─── Layout containers ─────────────────────────────── */

.site-header, .site-main, .site-footer {
    max-width: var(--measure-wide);
    margin: 0 auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

/* Article pages: constrain content to reading width inside the wider container */
.breadcrumb, .post, .post-foot {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
}

.site-main {
    padding-top: var(--space-8);
    padding-bottom: var(--space-9);
}

.site-footer {
    padding-top: var(--space-6);
    padding-bottom: var(--space-7);
    margin-top: var(--space-8);
    border-top: 1px solid var(--border);
    color: var(--fg-faint);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.footer-brand {
    color: var(--fg-muted);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4ch;
}

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.7ch;
    color: var(--fg-muted);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
}

.status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--phosphor);
    box-shadow: 0 0 6px var(--phosphor-dim);
    animation: status-pulse 2.5s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
}

.footer-fine {
    margin: 0;
    color: var(--fg-faint);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-fine a {
    color: var(--fg-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 150ms, border-color 150ms;
}

.footer-fine a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent-dim);
}

/* ─── Brand + nav (Storm DNA: mono uppercase) ──────── */

.brand {
    font-family: var(--font-mono);
    color: var(--fg);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.4ch;
    transition: color 150ms;
}

.brand:hover { color: var(--accent); }

.brand-mark {
    width: 0.95em;
    height: 0.95em;
    flex-shrink: 0;
}

.site-nav {
    display: flex;
    gap: var(--space-5);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.site-nav a {
    color: var(--fg-muted);
    text-decoration: none;
    transition: color 150ms;
    position: relative;
    padding-bottom: 0.25rem;
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms ease;
}

.site-nav a:hover { color: var(--accent); }
.site-nav a:hover::after { transform: scaleX(1); }

/* ─── Article prose ────────────────────────────────── */

.post h1 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-5);
}

.post h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: var(--space-7) 0 var(--space-3);
    letter-spacing: -0.01em;
}

.post h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: var(--space-6) 0 var(--space-2);
}

.post p { margin: 0 0 var(--space-5); }

.post a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-dim);
    transition: border-color 150ms;
}

.post a:hover { border-bottom-color: var(--accent); }

.post code {
    font-family: var(--font-mono);
    background: var(--bg-elev);
    padding: 0.15em 0.4em;
    border-radius: 2px;
    font-size: 0.88em;
}

.post pre {
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent-dim);
    padding: var(--space-4) var(--space-5);
    overflow-x: auto;
    border-radius: 2px;
    font-size: 0.88em;
    line-height: 1.55;
    margin: var(--space-5) 0;
}

.post pre code { background: none; padding: 0; font-size: 1em; }

.post blockquote {
    border-left: 2px solid var(--accent);
    margin: var(--space-5) 0;
    padding: var(--space-2) var(--space-5);
    color: var(--fg-muted);
    font-style: italic;
}

.post ul, .post ol {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-5);
}

.post li { margin-bottom: var(--space-2); }

.post hr {
    border: none;
    border-top: 1px solid var(--border-rule);
    margin: var(--space-7) auto;
    width: 30%;
}

/* ─── Breadcrumb (terminal path syntax) ─────────────── */

.breadcrumb {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-muted);
    margin: 0 0 var(--space-6);
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
}

.breadcrumb .crumb-link {
    color: var(--fg-muted);
    text-decoration: none;
    transition: color 150ms;
}

.breadcrumb .crumb-link:hover { color: var(--accent); }

.breadcrumb .sep { color: var(--fg-faint); }

.breadcrumb .date { color: var(--fg-muted); }

/* ─── Metadata strip (ls -l, hairlines top and bottom) ─ */

.meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: var(--space-6) 0 var(--space-7);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--border-rule);
    border-bottom: 1px solid var(--phosphor-dim);
    align-items: start;
}

.meta-col { min-width: 0; }

.meta-col dt {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-faint);
    margin: 0 0 var(--space-2);
}

.meta-col dd {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--fg);
    margin: 0;
    line-height: 1.4;
}

.meta-tags {
    margin-left: auto;
    text-align: right;
}

/* ─── Tag chips (phosphor frames, mono, hash prefix) ── */

.tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.meta-tags .tags { justify-content: flex-end; }

.tags li {
    color: var(--phosphor);
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--phosphor-dim);
    border-radius: 2px;
    background: transparent;
}

.tags li::before {
    content: "#";
    color: var(--phosphor-dim);
    margin-right: 0.1ch;
}

/* ─── Back link (bracket-bordered, ASCII frame feel) ── */

.post-foot {
    margin-top: var(--space-8);
    text-align: center;
}

.post-foot a {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--fg-muted);
    text-decoration: none;
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--border-rule);
    border-radius: 2px;
    transition: color 150ms, border-color 150ms;
    letter-spacing: 0.05em;
}

.post-foot a:hover {
    color: var(--phosphor);
    border-color: var(--phosphor-dim);
}

/* ─── Index page: hero + sidebar layout ────────────── */

.hero {
    margin: 0 0 var(--space-6);
    display: flex;
    align-items: stretch;
    gap: var(--space-7);
}

.hero-text { flex: 1; min-width: 0; }

.hero-aside {
    flex-shrink: 0;
    width: 22rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    text-align: right;
    gap: var(--space-5);
}

@media (max-width: 820px) {
    .hero {
        flex-direction: column;
        gap: var(--space-5);
    }
    .hero-aside {
        width: auto;
        align-items: flex-start;
        text-align: left;
    }
}

.hero .lede {
    font-size: 1.7rem;
    line-height: 1.35;
    color: var(--fg);
    margin: 0 0 var(--space-4);
    letter-spacing: -0.018em;
    max-width: 58ch;
    font-weight: 500;
}

.hero .lede-sub {
    color: var(--fg-muted);
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0;
    max-width: 60ch;
}

/* ─── Quote panel (the reasons to continue building) ── */

.quote-zone {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin: var(--space-6) 0 var(--space-5);   /* tighter vertical margins;
                                                  panel min-height now does the visual work */
}

.quote-region {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    min-width: 0;
}

/* Profile picture slot - placeholder for now; drop in an <img> later */
.profile-block { flex-shrink: 0; }

.profile-pic {
    width: 7rem;
    height: 7rem;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.profile-pic-placeholder {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 2rem;
    color: var(--fg-faint);
    letter-spacing: 0.04em;
}

@media (max-width: 820px) {
    .quote-zone {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }
}

.quote-panel {
    position: relative;
    flex: 1;
    margin: 0;
    padding: var(--space-7) var(--space-6) var(--space-5) var(--space-8);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: 4px;
    min-width: 0;
}

@media (max-width: 820px) {
    .quote-region {
        flex-direction: column;
        align-items: stretch;
    }
}

.quote-panel::before {
    content: "\201C";  /* opening curly double-quote */
    position: absolute;
    top: -0.6rem;
    left: 0.8rem;
    font-family: var(--font-serif);
    font-size: 5rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.55;
    user-select: none;
    pointer-events: none;
}

.quote-body {
    margin: 0;
    transition: opacity 200ms ease;
}

.quote-fading { opacity: 0; }

.quote-text {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--fg);
    font-style: italic;
    margin: 0 0 var(--space-4);
    min-height: 2em;
    letter-spacing: -0.005em;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* vertically center the text within min-height */
}

.quote-foot {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.quote-credit {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.quote-attr {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-dim);
    opacity: 0.5;
    transition: opacity 150ms, border-color 150ms;
}

.quote-attr:hover {
    opacity: 0.8;
    border-bottom-color: var(--accent);
}

.quote-sep,
.quote-date {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-faint);
}

.quote-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-shrink: 0;
}

.quote-next,
.quote-prev {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-muted);
    background: transparent;
    border: 1px solid var(--border-rule);
    border-radius: 2px;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: color 150ms, border-color 150ms, transform 150ms, background 150ms;
}

.quote-next:hover {
    color: var(--phosphor);
    border-color: var(--phosphor-dim);
    background: var(--bg-elev);
    transform: translateX(2px);
}

.quote-prev:hover {
    color: var(--phosphor);
    border-color: var(--phosphor-dim);
    background: var(--bg-elev);
    transform: translateX(-2px);
}

.quote-next-label {
    margin: 0 0.3ch;
}


/* Resume link - small mono uppercase chip, used in the hero's bottom-right. */
.resume-link {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-faint);
    text-decoration: none;
    padding: 0.2rem 0;
    border-bottom: 1px solid transparent;
    transition: color 150ms, border-bottom-color 150ms;
}

.resume-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent-dim);
}

.quote-data { display: none; }

.index-grid {
    display: grid;
    grid-template-columns: 1fr 18rem;
    grid-template-areas: "main side";
    gap: var(--space-8);
    align-items: start;
    border-top: 1px solid var(--border);
    padding-top: var(--space-7);
}

.index-main { grid-area: main; min-width: 0; }

.index-side {
    grid-area: side;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: var(--space-6) var(--space-5);
    box-shadow: 0 1px 0 var(--border-rule), 0 8px 24px rgba(0, 0, 0, 0.25);
    position: sticky;
    top: var(--space-6);
}

@media (max-width: 820px) {
    .index-side { position: static; }
}

@media (max-width: 820px) {
    .index-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "side"
            "main";
        gap: var(--space-7);
    }
}

.section-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--fg-muted);
    margin: 0 0 var(--space-4);
    font-weight: 500;
}

.side-block {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-rule);
}

.side-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.connect-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ─── Currently (now) - three sub-sections ─────────── */

.now-section { margin-bottom: var(--space-5); }
.now-section:last-child { margin-bottom: 0; }

.now-section-key {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fg-faint);
    margin: 0 0 var(--space-2);
    font-weight: 500;
}

.now-entry { margin-bottom: var(--space-3); }
.now-entry:last-child { margin-bottom: 0; }

.now-entry-name {
    display: block;
    color: var(--fg);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

.now-entry-name a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-dim);
    transition: border-color 150ms;
}

.now-entry-name a:hover { border-bottom-color: var(--accent); }

.now-entry-note {
    display: block;
    color: var(--fg-muted);
    font-size: 0.85rem;
    line-height: 1.4;
    margin-top: 0.15rem;
}

/* ─── Founder block - top of the hero's right column ─────────── */

.hero-founder {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.hero-founder-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fg-faint);
    margin-bottom: 0.3rem;
}

.hero-founder-name {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-dim);
    transition: border-color 150ms;
    margin-bottom: var(--space-2);
}

.hero-founder-name:hover { border-bottom-color: var(--accent); }

.hero-founder-desc {
    color: var(--fg-muted);
    font-size: 0.88rem;
    line-height: 1.45;
    margin: 0 0 var(--space-3);
}

.hero-founder-creed {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-faint);
    margin: 0 0 var(--space-3);
    line-height: 1.5;
}

.hero-founder-why {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--fg-muted);
    margin: 0;
}

.hero-founder-why a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-dim);
    transition: border-color 150ms;
    white-space: nowrap;
}

.hero-founder-why a:hover { border-bottom-color: var(--accent); }

@media (max-width: 820px) {
    .hero-founder { align-items: flex-start; }
}

/* ─── Forges sidebar block - rhythm parallels CURRENTLY ─ */

.forge-section { margin-bottom: var(--space-5); }
.forge-section:last-child { margin-bottom: 0; }

.forge-section-key {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fg-faint);
    margin: 0 0 var(--space-2);
    font-weight: 500;
}

.forge-entry {
    display: block;
    text-decoration: none;
    margin-bottom: var(--space-3);
    color: inherit;
}

.forge-entry:last-child { margin-bottom: 0; }

.forge-entry-name {
    display: block;
    color: var(--accent);
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    border-bottom: 1px solid var(--accent-dim);
    transition: border-color 150ms;
    width: max-content;
    max-width: 100%;
}

.forge-entry:hover .forge-entry-name { border-bottom-color: var(--accent); }

.forge-entry-display {
    display: block;
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 0.15rem;
    word-break: break-word;
}

.connect-list li {
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.connect-list .key {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--fg-faint);
}

.connect-list a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-dim);
    font-size: 0.92rem;
    word-break: break-word;
    transition: border-color 150ms;
}

.connect-list a:hover { border-bottom-color: var(--accent); }

/* ─── Post list (inside the writing section) ───────── */

.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-list li {
    margin: 0 0 var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
}

.post-list li:last-child { border-bottom: none; }

.post-list a {
    display: block;
    color: inherit;
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: var(--space-4);
    margin-left: calc(var(--space-4) * -1);
    transition: border-color 200ms ease, padding-left 200ms ease;
}

.post-list a:hover {
    border-left-color: var(--accent);
    padding-left: var(--space-5);
}

.post-list .title {
    display: block;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: var(--space-2);
    transition: color 150ms;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.post-list .description {
    display: block;
    color: var(--fg-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.post-list a:hover .title { color: var(--accent); }

/* ─── Featured posts - elevated cards above RECENT WRITING ──── */

.featured { margin-bottom: var(--space-8); }

.featured-list .featured-card {
    padding: var(--space-5) var(--space-5) var(--space-5) var(--space-5);
    margin-bottom: var(--space-5);
    border: 1px solid var(--border);
    border-left: 2px solid color-mix(in oklch, var(--accent) 50%, transparent);
    background: color-mix(in oklch, var(--bg-elev) 60%, transparent);
    border-radius: 4px;
}

.featured-list .featured-card:last-child { margin-bottom: 0; padding-bottom: var(--space-5); }

.featured-list a {
    /* override the .post-list a left-border hover trick - featured cards already have their own border */
    border-left: none;
    padding-left: 0;
    margin-left: 0;
}

.featured-list a:hover { padding-left: 0; }

.featured-list .title {
    font-size: 1.85rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}

.featured-list .description {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: var(--space-3);
}

/* Post meta row: date + tag chips inline beneath the description */
.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.post-date,
.post-time {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-faint);
}

.post-meta-sep { color: var(--fg-faint); font-size: 0.7rem; }

.post-list-tags { font-size: 0.65rem; }
.post-list-tags li { padding: 0.1rem 0.4rem; }

/* Kind badge - category indicator above each post title.
   One per kind; the modifier class colors it. */
.post-kind {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 0.18rem 0.6rem;
    border-radius: 2px;
    border: 1px solid;
    margin-bottom: var(--space-3);
    transition: transform 200ms ease;
}

.post-list a:hover .post-kind { transform: translateX(2px); }

.post-kind--post {
    color: var(--kind-post);
    border-color: color-mix(in oklch, var(--kind-post) 45%, transparent);
    background: color-mix(in oklch, var(--kind-post) 10%, transparent);
}

.post-kind--newsletter {
    color: var(--kind-newsletter);
    border-color: color-mix(in oklch, var(--kind-newsletter) 45%, transparent);
    background: color-mix(in oklch, var(--kind-newsletter) 12%, transparent);
}

.post-kind--contribution {
    color: var(--kind-contribution);
    border-color: color-mix(in oklch, var(--kind-contribution) 45%, transparent);
    background: color-mix(in oklch, var(--kind-contribution) 10%, transparent);
}

.post-kind--dispatch {
    color: var(--kind-dispatch);
    border-color: color-mix(in oklch, var(--kind-dispatch) 45%, transparent);
    background: color-mix(in oklch, var(--kind-dispatch) 10%, transparent);
}

.post-kind--tutorial {
    color: var(--kind-tutorial);
    border-color: color-mix(in oklch, var(--kind-tutorial) 45%, transparent);
    background: color-mix(in oklch, var(--kind-tutorial) 10%, transparent);
}

/* ─── SpellBlocks ───────────────────────────────────────
   Django Spellbook's {~ name ~} blocks, rendered native (see src/spellblock.rs).
   These elements live inside .post-body. v1: callout, card, step, accordion.
   ──────────────────────────────────────────────────── */

/* {~ alert ~} -> callout */
.spell-callout {
    display: flex;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    padding: var(--space-4);
    background: var(--bg-elev);
    border: 1px solid var(--border-rule);
    border-left: 3px solid var(--fg-muted);
    border-radius: 2px;
}
.spell-callout-icon { flex-shrink: 0; font-size: 1.05rem; }
.spell-callout-body { min-width: 0; }
.spell-callout-body > :first-child { margin-top: 0; }
.spell-callout-body > :last-child { margin-bottom: 0; }
.spell-callout--info    { border-left-color: #6ab7ff; }
.spell-callout--warning { border-left-color: #e0b450; }
.spell-callout--success { border-left-color: #7eecb5; }
.spell-callout--danger  { border-left-color: #ff7a6b; }

/* {~ card ~} */
.spell-card {
    margin: var(--space-5) 0;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.spell-card-head {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
}
.spell-card-body { padding: var(--space-4); }
.spell-card-body > :first-child { margin-top: 0; }
.spell-card-body > :last-child { margin-bottom: 0; }
.spell-card-foot {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--fg-muted);
}

/* {~ label_seperator ~} -> a labelled rule, for tutorial step markers */
.spell-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-7) 0 var(--space-4);
}
.spell-step::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-rule);
}
.spell-step-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--accent);
}
.spell-step-label > p { display: inline; margin: 0; }

/* {~ accordion ~} -> native <details>, zero JavaScript */
.spell-accordion {
    margin: var(--space-4) 0;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.spell-accordion-summary {
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.spell-accordion-summary::-webkit-details-marker { display: none; }
.spell-accordion-summary::after {
    content: "+";
    float: right;
    color: var(--fg-muted);
}
.spell-accordion[open] .spell-accordion-summary::after { content: "−"; }
.spell-accordion-body { padding: 0 var(--space-4) var(--space-4); }
.spell-accordion-body > :first-child { margin-top: 0; }
.spell-accordion-body > :last-child { margin-bottom: 0; }

/* ─── Code block copy button ──────────────────────── */

.code-block {
    position: relative;
}

.code-block pre {
    /* leave room for the button so it never sits on top of code */
    padding-top: 2.25rem;
}

.copy-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: var(--bg-inset);
    border: 1px solid var(--border-rule);
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.code-block:hover .copy-btn,
.code-block:focus-within .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: var(--bg-elev);
}

.copy-btn--ok {
    opacity: 1 !important;
    color: var(--accent);
    border-color: var(--accent);
    background: var(--bg-elev);
}

.copy-btn--err {
    opacity: 1 !important;
    color: var(--kind-contribution);
    border-color: var(--kind-contribution);
    background: var(--bg-elev);
}

/* Touch / no-hover devices: button can't reveal on hover, so show it muted
   by default and brighten on tap. */
@media (hover: none) {
    .copy-btn {
        opacity: 0.55;
    }
}

/* ─── Tag truncation toggle (article FILED UNDER strip) ─── */

.tag-hidden {
    display: none !important;
}

/* The toggle <li> sits inside .tags but skips the phosphor-pill styling
   so the button inside reads as interactive, not as another tag. */
.tags li.tag-toggle {
    color: var(--fg-muted);
    padding: 0;
    border: none;
    background: transparent;
}

.tags li.tag-toggle::before {
    content: none;
}

.tag-toggle-btn {
    background: transparent;
    border: 1px dashed var(--border-rule);
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: inherit;
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}

.tag-toggle-btn:hover,
.tag-toggle-btn:focus-visible {
    color: var(--accent);
    border-color: var(--accent-dim);
}

/* ─── "Own Your Stack" - newsletter identity ────────────
   A body-level scope worn by the /newsletter/ index and by every newsletter
   issue page (the .oys class gets attached in Issues 2–3). It rebinds the
   page accent to the existing newsletter "broadcast" blue and styles the
   masthead bar.

   Dormant until the .oys class is attached - adding this section changes
   nothing on the current site. Tune the literal values right here.
   ──────────────────────────────────────────────────── */

.oys {
    --accent:     var(--kind-newsletter);  /* broadcast blue replaces gold, page-wide */
    --accent-dim: #2c4a66;                 /* dimmed blue - selection highlight */
}

/* The masthead bar: the "OWN YOUR STACK" identity block that opens the
   newsletter index and sits atop each issue. Markup contract for Issue 3:
     <header class="oys-masthead">
       <p class="oys-masthead-name">Own Your Stack</p>
       <p class="oys-masthead-tagline">…</p>
     </header>                                                            */
.oys-masthead {
    max-width: var(--measure);
    margin: 0 auto var(--space-7);
    font-family: var(--font-mono);
    background: var(--bg-elev);
    border: 1px solid var(--border-rule);
    border-left: 3px solid var(--kind-newsletter);
    padding: var(--space-5);
}

.oys-masthead-name {
    margin: 0;
    color: var(--kind-newsletter);
    font-size: 1.05rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.oys-masthead-tagline {
    margin: var(--space-2) 0 0;
    color: var(--fg-muted);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

/* ─── "Own Your Stack" landing page - /newsletter/ ──────
   Worn under the .oys scope, so --accent resolves to broadcast blue. The
   issue list reuses .post-list / .post-kind from the homepage - no new
   list rules here.
   ──────────────────────────────────────────────────── */

.oys-page {
    max-width: var(--measure);
    margin: 0 auto;
}

.oys-pitch {
    margin-bottom: var(--space-8);
}

.oys-pitch-headline {
    margin: 0 0 var(--space-4);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.oys-pitch-body {
    margin: 0;
    color: var(--fg-muted);
    font-size: 1.15rem;
    line-height: 1.5;
}

/* Subscribe affordance - the page's single call to action. The button
   colour is --accent, which resolves to broadcast blue under .oys. */
.oys-subscribe {
    margin-bottom: var(--space-8);
    padding: var(--space-5);
    border: 1px solid var(--border-rule);
    border-radius: 2px;
    text-align: center;
}

.oys-subscribe-link {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    border: 1px solid var(--accent);
    border-radius: 2px;
    transition: background 150ms ease, color 150ms ease;
}

.oys-subscribe-link:hover,
.oys-subscribe-link:focus-visible {
    background: var(--accent);
    color: var(--bg);
}

.oys-subscribe-note {
    margin: var(--space-3) 0 0;
    color: var(--fg-faint);
    font-size: 0.85rem;
}

.oys-issues-empty {
    color: var(--fg-muted);
    font-style: italic;
}