/* ============================================================
   Divyansh Rawat — Portfolio (adyasha.in minimal format)
   Dual-theme, 45rem container, signature highlighter & meteors
   ============================================================ */

/* ---------- Theme tokens (Default: Pure White like adyasha.in) ---------- */
:root {
    --mainColor:       #79ffe1;
    --bg:              #ffffff;
    --bg-elev:         #fafafa;
    --surface:         #ffffff;
    --text:            #000000;
    --muted:           #555555;
    --faint:           #888888;
    --border:          #eaeaea;
    --border-soft:     #f2f2f2;
    --accent:          var(--mainColor);
    --accent-ink:      #000000;
    --work-accent:     #000000;
    --tag-bg:          #f2f2f2;
    --primary-color:   #000000;
    --secondary-color: #666666;
    --gh-purple:       #8250df;
    --gh-purple-bg:    rgba(130, 80, 223, .10);
    --gh-green:        #1a7f37;
    --gh-green-bg:     rgba(26, 127, 55, .10);
    --shadow:          0 2px 10px rgba(0,0,0,.06);

    --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
    --serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
    --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --ease:  cubic-bezier(.22, 1, .36, 1);
}

html[data-theme="dark"] {
    --mainColor:       #4169e1;
    --bg:              #000000;
    --bg-elev:         #0a0a0d;
    --surface:         #0d0d12;
    --text:            #ffffff;
    --muted:           #8999b0;
    --faint:           #525d6e;
    --border:          #202026;
    --border-soft:     #17171d;
    --accent:          var(--mainColor);
    --accent-ink:      #79ffe1;
    --work-accent:     #79ffe1;
    --tag-bg:          #14141a;
    --primary-color:   #ffffff;
    --secondary-color: #8999b0;
    --gh-purple:       #a371f7;
    --gh-purple-bg:    rgba(163, 113, 247, .14);
    --gh-green:        #3fb950;
    --gh-green-bg:     rgba(63, 185, 80, .14);
    --shadow:          0 2px 12px rgba(0,0,0,.5);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.6;
    color: var(--primary-color);
    background-color: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color .3s ease, color .3s ease;
}

::selection {
    background-color: var(--mainColor);
    color: #000000;
}

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

/* Signature adyasha.in link highlighter hover */
a {
    background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 4px 4px;
    text-decoration: none;
    color: var(--primary-color);
    transition: background-size .2s ease;
}
a:hover {
    background-size: 4px 50px;
    color: var(--primary-color);
}

/* Reset for items that shouldn't have underline gradient */
.footer-logo, .work-link, .tag, .theme-toggle, .cp-link, .cp-logo, img, .project-name,
.post-row-link, .post-row-link:hover, .post-nav-item, .post-back, .tool-btn, .link-btn,
.entry, .work-card, .cp-card, .oss-stat, .oss-stat:hover, .topbar, .drag-handle, .nav-link, .nav-link:hover,
.oss-item, .oss-item-title, .oss-item-title:hover, .oss-item-repo, .oss-item-repo:hover,
.oss-seg-btn, .more a, .oss-pill-link, .oss-pill-link:hover, .oss-impact-repo-name, .oss-impact-repo-name:hover,
.oss-org-name, .oss-org-name:hover, .oss-org-repo-link, .oss-org-repo-link:hover,
.oss-cta-button, .oss-cta-button:hover, .oss-footer-actions a {
    background-image: none !important;
}

.wrap, .post-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* ---------- Meteor Effect ---------- */
.meteor-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
@keyframes meteorAnim {
    0% { transform: rotate(315deg) translateX(0); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: rotate(315deg) translateX(-2000px); opacity: 0; }
}
.meteor {
    position: absolute;
    width: 3px;
    height: 3px;
    background: linear-gradient(90deg, rgba(203,26,111,.8), transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(228,25,225,.1), 0 0 3px 3px rgba(255,0,247,.1), 0 0 8px 5px rgba(236,34,179,.2);
    animation: meteorAnim 8s linear infinite;
}
.meteor:nth-child(1) { top: 10%; left: 100%; animation-delay: 0s; animation-duration: 7s; }
.meteor:nth-child(2) { top: 20%; left: 90%; animation-delay: -1s; animation-duration: 6s; }
.meteor:nth-child(3) { top: 40%; left: 80%; animation-delay: -3s; animation-duration: 8s; }
.meteor:nth-child(4) { top: 60%; left: 95%; animation-delay: -4s; animation-duration: 10s; }
.meteor:nth-child(5) { top: 15%; left: 85%; animation-delay: -2s; animation-duration: 9s; }
.meteor:nth-child(6) { top: 35%; left: 100%; animation-delay: -5s; animation-duration: 7.5s; }
.meteor:nth-child(7) { top: 45%; left: 90%; animation-delay: -6s; animation-duration: 8.5s; }
.meteor:nth-child(8) { top: 25%; left: 95%; animation-delay: -7s; animation-duration: 9.5s; }

/* ---------- 45rem Layout Container ---------- */
.layout-container {
    max-width: 45rem;
    padding: 0 1.5rem;
    margin: 0 auto;
    min-height: 100vh;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    z-index: 2;
}
@media only screen and (max-width: 500px) {
    .layout-container { padding: 0 1.25rem; }
}

/* ---------- Top Navbar ---------- */
.navbar-wrapper {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    width: 100%;
}
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.nav-links {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}
.nav-link {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--primary-color) !important;
    cursor: pointer;
    background: none !important;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    opacity: 0.72;
    transition: opacity .2s ease, border-color .2s ease;
}
.nav-link:hover {
    opacity: 1;
    border-bottom-color: var(--mainColor);
    background: none !important;
}
.nav-link.active {
    opacity: 1;
    font-weight: 500;
    border-bottom-color: var(--mainColor);
    background: none !important;
}
@media only screen and (max-width: 500px) {
    .nav-links { gap: 0.85rem; }
    .nav-link { font-size: 0.95rem; }
}

.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.theme-toggle:hover {
    border-color: var(--mainColor);
    transform: rotate(15deg);
}
.theme-toggle svg { display: block; }
html[data-theme="dark"]  .icon-sun  { display: block; }
html[data-theme="dark"]  .icon-moon { display: none; }
html[data-theme="light"] .icon-sun  { display: none; }
html[data-theme="light"] .icon-moon { display: block; }

/* ---------- Main Content & Tabs ---------- */
.main-content {
    flex: 1 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.tab-pane {
    display: none;
    animation: fadeIn .25s ease forwards;
    width: 100%;
}
.tab-pane.active {
    display: block;
}
.nav-short { display: none; }
.nav-full { display: inline; }
@media only screen and (max-width: 600px) {
    .nav-short { display: inline; }
    .nav-full { display: none; }
}

#about.tab-pane.active,
#home.tab-pane.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 auto;
    min-height: calc(100vh - 13rem);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Home / Profile Intro ---------- */
.profile-intro {
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 800px;
    margin: auto 0;
}
.profile-p {
    margin-bottom: 1.5rem;
    opacity: .9;
    transition: opacity .3s ease;
    color: var(--primary-color);
}
.profile-p:hover {
    opacity: 1;
}
.profile-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 2rem;
    font-size: 0.95rem;
}

/* Keyword slide-in underline */
.highlight-kw {
    font-weight: 500;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
}
.highlight-kw::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--mainColor);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.highlight-kw:hover::after {
    transform: scaleX(1);
}

/* ---------- Sub-pane Titles ---------- */
.pane-title {
    font-weight: 700;
    font-size: 1.5rem;
    margin: 2.5rem 0 1.5rem;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: .5rem;
}
.pane-title:first-child { margin-top: 1rem; }

/* ---------- Footer (adyasha.in layout) ---------- */
.footer {
    flex-shrink: 0;
    padding: 2.5rem 0 2rem;
    text-align: center;
    width: 100%;
    margin-top: auto;
}
.footer-logos {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: .75rem;
}
.footer-logo {
    cursor: pointer;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    opacity: .8;
    transition: opacity .2s ease, transform .2s ease;
}
.footer-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}
.footer-copyright {
    font-size: 13px;
    color: var(--secondary-color);
    opacity: .85;
}
.footer-updated {
    margin-bottom: 4px;
    font-style: italic;
}


p { margin: 0 0 1rem; color: var(--text); }
strong { color: var(--text); font-weight: 600; }

/* Keep prose readable even as the column widens */
#about > p { max-width: 66ch; }

/* Sub-group label inside a section */
.sub-label {
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 2.6rem 0 1.2rem;
    padding-top: 1.7rem;
    border-top: 1px solid var(--border-soft);
}
.sub-label--first { margin-top: .4rem; padding-top: 0; border-top: none; }

/* ---------- Hero ---------- */
.hero {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    padding: 3.6rem 0 2.8rem;
}
.avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.hero-body { min-width: 0; }
.name {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.1rem, 6vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: -.015em;
    margin: 0 0 .25rem;
    color: var(--text);
}
/* Same mono treatment as .cp-handle, so the handle reads as one identity
   whether it appears under the name or on a platform card. */
.handle {
    font-family: var(--mono);
    font-size: .78rem;
    margin: 0 0 .5rem;
}
.handle a { color: var(--faint); transition: color .25s var(--ease); }
.handle a:hover { color: var(--accent); }
.role {
    color: var(--muted);
    font-size: 1rem;
    margin: 0 0 .7rem;
}
.status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--muted);
    margin: 0 0 1rem;
}
.dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52,211,153,.5);
    animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.45); }
    70%  { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.links a {
    position: relative;
    color: var(--text);
    font-size: .9rem;
    font-weight: 500;
    padding-bottom: 1px;
}
.links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 100%; height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
}
.links a:hover { color: var(--accent); }
.links a:hover::after { transform: scaleX(1); }

/* ---------- Tech stack ---------- */
.stack {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.4rem;
}
.stack span {
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--muted);
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: border-color .25s var(--ease), color .25s var(--ease);
}
.stack span:hover { border-color: var(--accent); color: var(--text); }

/* ---------- Experience / entries ---------- */
.entry { margin-bottom: 1.2rem; }
.entry:last-child { margin-bottom: 0; }
.entry-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.entry-title { font-weight: 600; color: var(--text); }
.entry-date {
    font-family: var(--mono);
    font-size: .76rem;
    color: var(--faint);
    white-space: nowrap;
}
.entry-sub { color: var(--muted); font-size: .9rem; margin: .2rem 0 0; }
.entry-points {
    margin: .55rem 0 0;
    padding-left: 1.1rem;
    list-style: none;
}

/* Featured role — the work we most want read. */
.entry--featured {
    position: relative;
    padding: 1rem 1.2rem 1.1rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.entry--featured .entry-title { font-size: 1.02rem; }
.entry--featured .entry-points li { color: var(--text); }

/* Same card language as .entry--featured, deliberately one step quieter:
   neutral rule instead of the accent, no shadow. Reads as a set without
   competing with the role above it. */
.entry--soft {
    position: relative;
    padding: 1rem 1.2rem 1.1rem;
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--faint);
    border-radius: 10px;
    background: var(--bg-elev);
}
.entry-points li {
    position: relative;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.55;
    margin-top: .4rem;
}
.entry-points li:first-child { margin-top: 0; }
.entry-points li::before {
    content: "—";
    position: absolute;
    left: -1.1rem;
    color: var(--faint);
}

/* ---------- Project list ---------- */
.project-list { list-style: none; margin: 0; padding: 0; }
.project {
    padding: 1rem 0;
    border-top: 1px solid var(--border-soft);
}
.project:first-child { border-top: none; padding-top: 0; }
.project-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .3rem;
}
.project-name {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -.01em;
    transition: color .2s var(--ease);
}
.project-name:hover { color: var(--accent); }
.project-desc { color: var(--muted); font-size: .92rem; margin: 0; }

.tags { display: flex; gap: .4rem; flex-shrink: 0; }
.tag {
    font-family: var(--mono);
    font-size: .68rem;
    color: var(--muted);
    background: var(--tag-bg);
    padding: 2px 8px;
    border-radius: 5px;
    white-space: nowrap;
}
.tag-role { color: var(--accent); }

.more { margin: 1.6rem 0 0; }
.more a {
    font-size: .88rem;
    font-weight: 500;
    color: var(--muted);
    transition: color .15s var(--ease);
}
.more a:hover {
    color: var(--primary-color);
}

/* ---------- Open Source Development ---------- */
.oss-intro {
    color: var(--muted);
    font-size: .94rem;
    margin: 0 0 1.6rem;
}

.oss-stats {
    display: flex;
    gap: 1.2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.oss-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    min-width: 100px;
    flex: 1;
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
    transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.oss-stat:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.oss-stat:hover .oss-stat-value {
    color: var(--accent);
}
.oss-stat-value {
    font-family: var(--mono);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}
.oss-stat-label {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: .3rem;
}
.oss-stat-accent {
    font-size: 1.15rem !important;
    font-weight: 700;
    color: var(--accent) !important;
    white-space: nowrap;
}
.oss-stat--highlight {
    border-color: var(--border);
}

/* ---------- Upstream Organizations & Ecosystems Grid ---------- */
.oss-orgs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .85rem;
    margin: 1.2rem 0 2.2rem;
}
.oss-org-card {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.oss-org-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.oss-org-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .45rem;
}
.oss-org-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-color) !important;
    text-decoration: none;
    margin: 0;
    transition: color .15s var(--ease);
}
.oss-org-name:hover {
    color: var(--accent) !important;
}
.oss-org-badge {
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}
.oss-org-badge--cncf {
    color: #0086ff;
    background: rgba(0, 134, 255, .1);
}
.oss-org-badge--k8s {
    color: #326ce5;
    background: rgba(50, 108, 229, .12);
}
.oss-org-badge--transit {
    color: #e36209;
    background: rgba(227, 98, 9, .1);
}
.oss-org-badge--ai {
    color: #8957e5;
    background: rgba(137, 87, 229, .1);
}
.oss-org-desc {
    font-size: .84rem;
    color: var(--muted);
    line-height: 1.48;
    margin: 0 0 .85rem;
}
.oss-org-tags {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.oss-org-repos {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .7rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--border-soft);
}
.oss-org-repo-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--mono);
    font-size: .71rem;
    color: var(--muted) !important;
    text-decoration: none;
    background: var(--tag-bg);
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--border-soft);
    transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.oss-org-repo-link:hover {
    color: var(--accent) !important;
    border-color: var(--accent);
    background: var(--surface);
}

/* ---------- Detailed Upstream Impact Cards (Outer Repositories) ---------- */
.oss-sub-intro {
    font-size: .84rem;
    color: var(--muted);
    margin: -.5rem 0 1.2rem;
    font-family: var(--mono);
}
.oss-impact-list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 1.2rem 0 2.2rem;
}
.oss-impact-card {
    padding: 1.2rem 1.35rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.oss-impact-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.oss-impact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}
.oss-impact-title-group {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}
.oss-impact-repo-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-color) !important;
    text-decoration: none;
    transition: color .15s var(--ease);
}
.oss-impact-repo-name:hover {
    color: var(--accent) !important;
}
.oss-impact-summary {
    font-size: .92rem;
    font-weight: 500;
    color: var(--primary-color);
    line-height: 1.45;
    margin-bottom: .75rem;
}
.oss-impact-details {
    background: var(--tag-bg);
    border-radius: 8px;
    padding: .85rem 1rem;
    margin-bottom: .85rem;
    border: 1px solid var(--border-soft);
    font-size: .83rem;
    line-height: 1.52;
    color: var(--text);
}
.oss-impact-point {
    margin-bottom: .45rem;
}
.oss-impact-point:last-child {
    margin-bottom: 0;
}
.oss-point-label {
    color: var(--accent);
    font-family: var(--mono);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-right: .3rem;
}
.oss-impact-links {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border-soft);
    margin-top: .75rem;
}
.oss-impact-link-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    font-size: .76rem;
    font-family: var(--mono);
}
.oss-links-label {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    min-width: 140px;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .oss-links-label {
        min-width: 100%;
        margin-bottom: 2px;
    }
}
.oss-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    text-decoration: none;
    font-size: .72rem;
    font-family: var(--mono);
    line-height: 1.35;
    transition: all .15s var(--ease);
}
.oss-pill-link--merged {
    color: var(--gh-purple) !important;
    border: 1px solid rgba(137, 87, 229, .35);
    background-color: var(--gh-purple-bg) !important;
}
.oss-pill-link--merged:hover {
    border-color: var(--gh-purple);
    background-color: rgba(137, 87, 229, .2) !important;
    color: var(--gh-purple) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(137, 87, 229, .15);
}
.oss-pill-link--issue {
    color: var(--text) !important;
    border: 1px solid var(--border-soft);
    background-color: var(--surface) !important;
}
.oss-pill-link--issue:hover {
    color: var(--accent) !important;
    border-color: var(--accent);
    background-color: var(--tag-bg) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}
.oss-pill-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.oss-pill-dot--pr {
    background-color: var(--gh-purple);
}
.oss-pill-dot--issue {
    background-color: #2da44e;
}
.oss-pill-dot--issue-closed {
    background-color: #8250df;
}
.oss-feed-note {
    font-size: .8rem;
    color: var(--muted);
    margin: .4rem 0 1rem;
    line-height: 1.45;
}

/* ---------- Ecosystem Filter Pills ---------- */
.oss-eco-filters {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    margin: .5rem 0 1.1rem;
}
.oss-eco-btn {
    border: 1px solid var(--border-soft);
    background: transparent;
    color: var(--muted);
    font-family: var(--mono);
    font-size: .72rem;
    padding: 3px 9px;
    border-radius: 12px;
    cursor: pointer;
    transition: all .15s var(--ease);
}
.oss-eco-btn:hover {
    color: var(--primary-color);
    border-color: var(--border);
}
.oss-eco-btn.active {
    background: var(--tag-bg);
    color: var(--primary-color);
    font-weight: 600;
    border-color: var(--accent);
}

.oss-eco-badge {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: .58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.oss-eco-badge--cncf {
    color: #0086ff;
    background: rgba(0, 134, 255, .1);
}
.oss-eco-badge--k8s {
    color: #326ce5;
    background: rgba(50, 108, 229, .12);
}
.oss-eco-badge--transit {
    color: #e36209;
    background: rgba(227, 98, 9, .1);
}
.oss-eco-badge--ai {
    color: #8957e5;
    background: rgba(137, 87, 229, .1);
}
.oss-eco-badge--oss {
    color: var(--muted);
    background: var(--tag-bg);
}
.oss-eco-badge--cloud {
    color: #0284c7;
    background: rgba(2, 132, 199, .1);
}

/* ---------- OSS Segmented Controls & Feeds ---------- */
.oss-feed-controls {
    display: flex;
    align-items: center;
    margin: 1.5rem 0 .5rem;
}
.oss-seg-control {
    display: inline-flex;
    background: var(--tag-bg);
    padding: 3px;
    border-radius: 9px;
    border: 1px solid var(--border-soft);
    gap: 3px;
}
.oss-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: .84rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .18s var(--ease);
}
.oss-seg-btn:hover {
    color: var(--primary-color);
}
.oss-seg-btn.active {
    background: var(--surface);
    color: var(--primary-color);
    font-weight: 600;
    border-color: var(--border-soft);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.oss-seg-count {
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(125, 125, 125, .12);
    color: var(--primary-color);
}

.oss-feed-panels {
    position: relative;
    min-height: 80px;
}
.oss-feed {
    display: none;
    flex-direction: column;
    gap: .5rem;
}
.oss-feed.active {
    display: flex;
}
.oss-loading {
    color: var(--faint);
    font-family: var(--mono);
    font-size: .78rem;
    padding: 1rem 0;
}

.oss-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: .65rem .85rem;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.oss-item:hover {
    border-color: var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.oss-item-main {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    flex: 1;
}

.oss-type-badge {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}
.oss-type-badge--merged {
    color: var(--gh-purple);
    background: var(--gh-purple-bg);
}
.oss-type-badge--open {
    color: var(--gh-green);
    background: var(--gh-green-bg);
}
.oss-type-badge--closed {
    color: var(--muted);
    background: var(--tag-bg);
}
.oss-type-badge--issue-open {
    color: var(--gh-green);
    background: var(--gh-green-bg);
}
.oss-type-badge--issue-closed {
    color: var(--gh-purple);
    background: var(--gh-purple-bg);
}

.oss-item-title {
    color: var(--primary-color);
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .15s var(--ease);
}
.oss-item:hover .oss-item-title {
    color: var(--accent);
}

.oss-item-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}
.oss-item-repo {
    font-family: var(--mono);
    font-size: .76rem;
    color: var(--muted);
    text-decoration: none;
    background: var(--tag-bg);
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--border-soft);
    transition: color .15s var(--ease), border-color .15s var(--ease);
}
.oss-item-repo:hover {
    color: var(--accent);
    border-color: var(--border);
}
.oss-item-time {
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--faint);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .oss-item {
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
        padding: .65rem .75rem;
    }
    .oss-item-main {
        width: 100%;
    }
    .oss-item-title {
        white-space: normal;
    }
    .oss-item-meta {
        width: 100%;
        justify-content: space-between;
        padding-left: 2px;
    }
}

.oss-footer-actions {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-top: 1.8rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border-soft);
}
.oss-cta-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: .85rem 1.15rem;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--primary-color) !important;
    font-family: var(--mono);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s var(--ease);
}
.oss-cta-button:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    color: var(--accent) !important;
}
.oss-cta-button--pr {
    border-left: 3.5px solid var(--gh-purple);
}
.oss-cta-button--issue {
    border-left: 3.5px solid #2da44e;
}
.oss-cta-arrow {
    flex-shrink: 0;
    color: var(--muted);
    font-size: .8rem;
    transition: transform .15s var(--ease), color .15s var(--ease);
}
.oss-cta-button:hover .oss-cta-arrow {
    color: var(--accent);
    transform: translateX(2px);
}

/* ---------- Featured work (case study) ----------
   Card language borrowed from .entry--featured and .cp-card so it reads as
   part of the set, but one size up and in gold: it is the only entry on the
   page pointing at something in production rather than at a repository. */
.work-card {
    position: relative;
    padding: 1.4rem 1.5rem 1.5rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--work-accent);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.work-head {
    display: flex;
    align-items: baseline;
    gap: .6rem 1rem;
    flex-wrap: wrap;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--border-soft);
}
.work-id { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; min-width: 0; }
.work-title {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}
.work-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.work-links { display: flex; gap: 1rem; margin-left: auto; flex-wrap: wrap; }
.work-link {
    font-size: .8rem;
    color: var(--muted);
    white-space: nowrap;
    transition: color .2s var(--ease);
}
.work-link--primary { color: var(--text); font-weight: 500; }
.work-link:hover { color: var(--work-accent); }

.work-lede {
    margin: 1rem 0 0;
    max-width: 66ch;
    font-size: .98rem;
    color: var(--text);
}

/* The stack in one glance, before the prose asks for any reading. */
.work-arch {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: 1rem;
    padding: .75rem .9rem;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--bg-elev);
    font-family: var(--mono);
    font-size: .72rem;
    line-height: 1.6;
}
.arch-row { color: var(--muted); }
.arch-row b { color: var(--text); font-weight: 500; }
.arch-row--sub { color: var(--faint); font-size: .68rem; }
.arw { color: var(--work-accent); padding: 0 .4rem; }

.work-points { margin-top: 1.1rem; }
.work-points li::before { color: var(--work-accent); }
.work-points code {
    font-family: var(--mono);
    font-size: .82em;
    color: var(--muted);
    background: var(--tag-bg);
    padding: 1px 5px;
    border-radius: 4px;
}

.work-stack { margin-top: 1.3rem; }
.work-stack span:hover { border-color: var(--work-accent); }

/* ---------- Platform cards (CP) ----------
   Same skeleton for both platforms — logo, two metrics, heatmap — so the
   equivalent number always sits in the equivalent slot and they compare
   at a glance. Accent is per-platform via --cp-accent. */
.cp-card {
    margin-bottom: 1.5rem;
    padding: 1.3rem 1.4rem 1.4rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--cp-accent);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: border-color .25s var(--ease);
}
.cp-card:last-child { margin-bottom: 0; }
.cp-card[data-scheme="lc"] { --cp-accent: #ffa116; }
.cp-card[data-scheme="cf"] { --cp-accent: #1f8dd6; }
.cp-card[data-scheme="gh"] { --cp-accent: #2ea043; }

.cp-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.cp-logo { border-radius: 6px; flex-shrink: 0; object-fit: contain; }
svg.cp-logo { color: var(--text); border-radius: 0; }
.cp-id { display: flex; flex-direction: column; min-width: 0; }
.cp-name {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    line-height: 1.25;
}
.cp-name:hover { color: var(--cp-accent); }
.cp-handle { font-family: var(--mono); font-size: .72rem; color: var(--faint); }
.cp-link {
    margin-left: auto;
    font-size: .78rem;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}
.cp-link:hover { color: var(--cp-accent); }

.cp-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1.1rem 0;
}
.cp-metric { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cp-metric-label {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
}
.cp-metric-value {
    font-family: var(--serif);
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 500;
    color: var(--text);
}
.cp-metric-sub { font-size: .78rem; color: var(--muted); }

.cp-activity { padding-top: .3rem; }
.cp-activity .hm-head { margin-bottom: .7rem; }

@media (max-width: 560px) {
    .cp-metric-value { font-size: 1.6rem; }
}

/* ---------- Activity heatmaps ---------- */
/* Cell ramps live on the card; the scheme overrides key off data-scheme
   alone so a card only has to name its platform. */
.cp-card {
    /* default scheme (GitHub green) */
    --hm-0: var(--tag-bg);
    --hm-1: #9be9a8;
    --hm-2: #40c463;
    --hm-3: #30a14e;
    --hm-4: #216e39;
}
[data-scheme="lc"] {
    --hm-1: #ffd9a0;
    --hm-2: #ffa116;
    --hm-3: #e08600;
    --hm-4: #a75f00;
}
[data-scheme="cf"] {
    --hm-1: #a8c7fb;
    --hm-2: #5b8def;
    --hm-3: #3563cc;
    --hm-4: #1f3f92;
}
html[data-theme="dark"] .cp-card { --hm-0: #1f1f26; }

.hm-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}
.hm-title {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .02em;
    color: var(--muted);
    text-decoration: none;
}
.hm-title:hover { color: var(--accent); }
.hm-count { font-size: .82rem; color: var(--faint); }

.hm-scroll { overflow-x: auto; padding-bottom: .2rem; }

.hm-months {
    display: grid;
    grid-auto-flow: column;
    gap: 3px;
    height: 1rem;
    font-size: .66rem;
    color: var(--faint);
    min-width: max-content;
}
.hm-months span { grid-row: 1; }

.hm-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 11px);
    gap: 3px;
    min-width: max-content;
}
.hm-cell {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: var(--hm-0);
    outline: 1px solid rgba(127, 127, 127, .06);
    outline-offset: -1px;
}
.hm-cell[data-l="1"] { background: var(--hm-1); }
.hm-cell[data-l="2"] { background: var(--hm-2); }
.hm-cell[data-l="3"] { background: var(--hm-3); }
.hm-cell[data-l="4"] { background: var(--hm-4); }
.hm-cell.pad { background: transparent; outline: none; }

.hm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .8rem;
    font-size: .74rem;
    color: var(--faint);
}
.hm-legend { display: inline-flex; align-items: center; gap: 3px; }
.hm-legend i {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: var(--hm-0);
    outline: 1px solid rgba(127, 127, 127, .06);
    outline-offset: -1px;
}
.hm-legend i[data-l="1"] { background: var(--hm-1); }
.hm-legend i[data-l="2"] { background: var(--hm-2); }
.hm-legend i[data-l="3"] { background: var(--hm-3); }
.hm-legend i[data-l="4"] { background: var(--hm-4); }
.hm-legend i:first-of-type { margin-left: .35rem; }
.hm-legend i:last-of-type { margin-right: .35rem; }

/* ---------- Footer ---------- */
.footer {
    max-width: var(--wrap);
    margin: 2rem auto 0;
    padding: 2.5rem 24px 3.5rem;
    border-top: 1px solid var(--border-soft);
}
.footer p {
    font-family: var(--mono);
    font-size: .76rem;
    color: var(--faint);
    margin: 0;
}

/* ---------- Scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
/* Short nav labels are hidden until the phone breakpoint. Declared BEFORE the
   media query — same specificity, so source order decides the winner. */
.nav .nav-short { display: none; }

@media (max-width: 560px) {
    .hero { flex-direction: column; align-items: flex-start; gap: 1.1rem; padding-top: 2.6rem; }
    .avatar { width: 80px; height: 80px; }
    .topbar-inner { padding: 8px 14px; gap: 6px; flex-wrap: wrap; }
    .topbar { border-radius: 24px; }
    .nav a { font-size: .68rem; letter-spacing: .06em; padding: 4px 9px; }
    .entry-head, .project-head { flex-direction: column; gap: .2rem; }
    .entry-date { order: -1; }

    /* Full section names don't fit four-across on a phone — swap to the
       short forms so the bar stops clipping and scrolling sideways. */
    .nav { max-width: none; overflow-x: visible; gap: 2px; }
    .nav .nav-full { display: none; }
    .nav .nav-short { display: inline; }

    /* Smaller cells; cellStep() in main.js must match (10 + 2 = 12). */
    .hm-grid { grid-template-rows: repeat(7, 10px); gap: 2px; }
    .hm-months { gap: 2px; font-size: .6rem; }
    .hm-cell, .hm-legend i { width: 10px; height: 10px; }

    /* Title and count stop fighting for one line. */
    .hm-head { flex-direction: column; align-items: flex-start; gap: .1rem; }
    .hm-foot { flex-direction: column; align-items: flex-start; gap: .55rem; }

    .cp-card { padding: 1.1rem 1rem 1.2rem; }
    .cp-metrics { gap: .9rem; padding: 1rem 0; }
    .cp-metric-sub { font-size: .72rem; line-height: 1.45; }
    .cp-head { gap: .6rem; }
    .cp-link { font-size: .74rem; }

    .oss-stats { gap: .6rem; margin-bottom: 1.5rem; }
    .oss-stat { padding: .75rem .5rem; min-width: 75px; }
    .oss-stat-value { font-size: 1.35rem; }
    .oss-stat-label { font-size: .6rem; letter-spacing: .05em; }

    .entry--featured, .entry--soft { padding: 1rem 1rem 1.1rem; }

    /* Title, status and links each get their own line rather than wrapping
       mid-phrase; the arrows in the architecture strip stop eating width. */
    .work-card { padding: 1.1rem 1rem 1.2rem; }
    .work-head { flex-direction: column; align-items: flex-start; gap: .45rem; }
    .work-id { gap: .5rem; }
    .work-title { font-size: 1.25rem; }
    .work-links { margin-left: 0; gap: .9rem; }
    .work-lede { font-size: .93rem; }
    .work-arch { font-size: .67rem; padding: .65rem .75rem; }
    .arch-row--sub { font-size: .64rem; }
    .arw { padding: 0 .25rem; }
}

/* ============================================================
   Blog — index, post typography, code, speed reader
   ============================================================ */

/* ---------- Index ---------- */
.blog-hero { border-top: none; padding-top: 3rem; }
.blog-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2rem, 5.5vw, 2.6rem);
    letter-spacing: -.015em;
    margin: 0 0 .5rem;
    color: var(--text);
}
.blog-lede { color: var(--muted); max-width: 60ch; margin: 0; }

.post-list { list-style: none; margin: 0; padding: 0; }
.post-row { border-top: 1px solid var(--border-soft); }
.post-row:first-child { border-top: none; }
.post-row-link {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0 1.4rem;
    padding: 1.35rem 0;
    color: inherit;
    align-items: baseline;
}
.post-row-date {
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--faint);
    letter-spacing: .02em;
    white-space: nowrap;
    padding-top: .3rem;
}
.post-row-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.post-row-title {
    font-family: var(--serif);
    font-size: 1.28rem;
    line-height: 1.25;
    color: var(--text);
    transition: color .25s var(--ease);
}
.post-row-link:hover .post-row-title { color: var(--accent); }
.post-row-sum { color: var(--muted); font-size: .93rem; line-height: 1.6; }
.post-row-meta {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--faint);
    letter-spacing: .03em;
    text-transform: lowercase;
}
.post-empty { color: var(--muted); padding: 1.4rem 0; }

/* ---------- Post ---------- */
.post-wrap { max-width: 720px; }
.post-head { padding: 2.8rem 0 0; }
.post-back {
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--faint);
    letter-spacing: .03em;
}
.post-back:hover { color: var(--accent); }
.post-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.9rem, 5.2vw, 2.55rem);
    line-height: 1.15;
    letter-spacing: -.015em;
    margin: .9rem 0 .7rem;
    color: var(--text);
}
.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--faint);
    margin: 0;
}
.dot-sep { color: var(--border); }
.post-draft {
    display: inline-block;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--work-accent);
    border: 1px dashed var(--work-accent);
    border-radius: 6px;
    padding: .3rem .55rem;
    margin: .9rem 0 0;
}
.post-tools {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.4rem 0 0;
    padding: 0 0 1.6rem;
    border-bottom: 1px solid var(--border-soft);
}
.tool-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .42rem .7rem;
    cursor: pointer;
    transition: color .25s var(--ease), border-color .25s var(--ease);
}
.tool-btn:hover { color: var(--text); border-color: var(--accent); }
.tool-btn:disabled { opacity: .5; cursor: default; }
.tool-hint { font-family: var(--mono); font-size: .72rem; color: var(--faint); }

/* ---------- Post body typography ---------- */
.post-body { padding: 2rem 0 0; font-size: 1.02rem; line-height: 1.75; }
.post-body > p { margin: 0 0 1.3rem; color: var(--text); }
.post-body h2, .post-body h3, .post-body h4 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--text);
    line-height: 1.25;
    letter-spacing: -.01em;
    scroll-margin-top: 90px;
}
.post-body h2 { font-size: 1.6rem; margin: 2.6rem 0 .9rem; }
.post-body h3 { font-size: 1.28rem; margin: 2.1rem 0 .7rem; }
.post-body h4 { font-size: 1.08rem; margin: 1.8rem 0 .6rem; }
.anchor {
    font-family: var(--mono);
    font-size: .8em;
    color: var(--border);
    margin-left: .45rem;
    opacity: 0;
    transition: opacity .2s var(--ease), color .2s var(--ease);
}
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity: 1; }
.anchor:hover { color: var(--accent); }
.post-body ul, .post-body ol { margin: 0 0 1.3rem; padding-left: 1.3rem; color: var(--text); }
.post-body li { margin: .45rem 0; }
.post-body li::marker { color: var(--faint); }
.post-body blockquote {
    margin: 1.6rem 0;
    padding: .2rem 0 .2rem 1.2rem;
    border-left: 2px solid var(--accent);
    color: var(--muted);
    font-style: italic;
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body hr { border: none; border-top: 1px solid var(--border); margin: 2.6rem 0; }
.post-body img { border-radius: 10px; border: 1px solid var(--border); margin: 1.6rem 0; }
.post-body strong { font-weight: 600; }
.post-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.post-body a:hover { text-decoration-color: var(--accent); }
.post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.6rem 0;
    font-size: .92rem;
    display: block;
    overflow-x: auto;
}
.post-body th, .post-body td { border: 1px solid var(--border); padding: .5rem .7rem; text-align: left; }
.post-body th { background: var(--tag-bg); font-weight: 600; }

/* Inline code, distinct from a block. */
.post-body :not(pre) > code {
    font-family: var(--mono);
    font-size: .86em;
    background: var(--tag-bg);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: .12em .35em;
    color: var(--accent-ink);
}

/* ---------- Code blocks ---------- */
.code-wrap {
    position: relative;
    margin: 1.6rem 0;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.code-lang {
    position: absolute;
    top: .55rem;
    left: .9rem;
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
}
.code-copy {
    position: absolute;
    top: .4rem;
    right: .45rem;
    font-family: var(--mono);
    font-size: .68rem;
    color: var(--faint);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: .25rem .5rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.code-wrap:hover .code-copy, .code-copy:focus { opacity: 1; }
.code-copy:hover { color: var(--text); border-color: var(--border); }
.code-copy.ok { color: var(--accent); opacity: 1; }
.code-wrap pre {
    margin: 0;
    padding: 2rem 1.1rem 1.1rem;
    overflow-x: auto;
}
.code-wrap code {
    font-family: var(--mono);
    font-size: .82rem;
    line-height: 1.7;
    color: var(--text);
}

/* ---------- Mermaid diagrams ---------- */
.mermaid-wrap {
    margin: 1.8rem 0;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.4rem 1.1rem;
    overflow-x: auto;
}
.mermaid-wrap .mermaid {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 60px;
    overflow-x: auto;
    font-family: var(--font);
}
.mermaid-wrap .mermaid svg {
    max-width: 100%;
    height: auto;
}
.mermaid-source {
    margin-top: 1.2rem;
    border-top: 1px dashed var(--border);
    padding-top: 0.8rem;
}
.mermaid-source summary {
    font-size: 0.82rem;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
    font-family: var(--mono);
    transition: color 0.2s var(--ease);
}
.mermaid-source summary:hover {
    color: var(--text);
}
.mermaid-source .code-wrap {
    margin: 0.8rem 0 0;
}


/* highlight.js tokens, mapped onto the site palette rather than a stock theme. */
.hljs-comment, .hljs-quote { color: var(--faint); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-doctag, .hljs-name { color: #c792ea; }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string { color: #a5d6a7; }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-selector-attr { color: #f0a76a; }
.hljs-title, .hljs-title.function_, .hljs-built_in { color: var(--accent-ink); }
.hljs-type, .hljs-class .hljs-title, .hljs-title.class_ { color: #ffd479; }
.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-property { color: #82d8f5; }
.hljs-meta, .hljs-deletion { color: var(--muted); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }
html[data-theme="light"] .hljs-keyword, html[data-theme="light"] .hljs-selector-tag,
html[data-theme="light"] .hljs-literal, html[data-theme="light"] .hljs-section,
html[data-theme="light"] .hljs-doctag, html[data-theme="light"] .hljs-name { color: #8250df; }
html[data-theme="light"] .hljs-string, html[data-theme="light"] .hljs-regexp,
html[data-theme="light"] .hljs-addition, html[data-theme="light"] .hljs-attribute { color: #1a7f37; }
html[data-theme="light"] .hljs-number, html[data-theme="light"] .hljs-symbol,
html[data-theme="light"] .hljs-bullet, html[data-theme="light"] .hljs-link { color: #bc4c00; }
html[data-theme="light"] .hljs-type, html[data-theme="light"] .hljs-title.class_ { color: #953800; }
html[data-theme="light"] .hljs-attr, html[data-theme="light"] .hljs-variable,
html[data-theme="light"] .hljs-property { color: #0550ae; }

/* ---------- Post footer ---------- */
.post-foot {
    margin-top: 3rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.post-share, .post-syndicate {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    font-size: .84rem;
}
.share-label {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
    min-width: 5.2rem;
}
.link-btn {
    font: inherit;
    font-size: .84rem;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-btn.ok { color: var(--muted); }

.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2.4rem 0 3rem;
}
.post-nav-item {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .9rem 1rem;
    color: var(--text);
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.3;
    transition: border-color .25s var(--ease), color .25s var(--ease);
}
.post-nav-item:hover { border-color: var(--accent); color: var(--accent); }
.post-nav-item span {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
}
.post-nav-next { text-align: right; align-items: flex-end; }

/* ---------- Reading progress ---------- */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 60;
    will-change: transform;
}

/* ---------- Speed reader ---------- */
body.sr-lock { overflow: hidden; }
.sr-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(6px);
    padding: 1rem;
}
.sr-overlay.on { display: flex; }
.sr-panel {
    position: relative;
    width: min(680px, 100%);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 1.4rem 1.4rem 1.1rem;
}
.sr-close {
    position: absolute;
    top: .8rem;
    right: .9rem;
    font-family: var(--mono);
    font-size: .68rem;
    color: var(--faint);
    background: none;
    border: none;
    cursor: pointer;
}
.sr-close:hover { color: var(--text); }

/* The pivot column is fixed dead centre, so the eye never tracks sideways. */
.sr-stage { padding: 2.4rem 0 1.6rem; }
.sr-guide { height: 1px; background: var(--border); position: relative; }
.sr-guide::before, .sr-guide::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 1px;
    height: 9px;
    background: var(--border);
}
.sr-word {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    font-family: var(--mono);
    font-size: clamp(1.4rem, 6.5vw, 2.3rem);
    line-height: 1.6;
    color: var(--text);
    padding: .5rem 0;
    white-space: pre;
}
.sr-word .sr-pre { text-align: right; }
.sr-word .sr-piv { color: var(--accent); }
.sr-word .sr-post { text-align: left; }
.sr-word.is-head { color: var(--accent-ink); }

.sr-progress {
    height: 4px;
    background: var(--tag-bg);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}
.sr-progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }

.sr-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 1rem 0 .6rem;
    flex-wrap: wrap;
}
.sr-btn {
    font-family: var(--mono);
    font-size: .76rem;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .45rem .8rem;
    cursor: pointer;
    transition: color .2s var(--ease), border-color .2s var(--ease);
}
.sr-btn:hover { color: var(--text); border-color: var(--accent); }
.sr-play { min-width: 5.5rem; color: var(--text); }
.sr-mini { padding: .45rem .6rem; }
.sr-wpm-group { display: inline-flex; align-items: center; gap: .4rem; }
.sr-wpm {
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--faint);
    min-width: 4.6rem;
    text-align: center;
}
.sr-status, .sr-help {
    text-align: center;
    font-family: var(--mono);
    font-size: .68rem;
    color: var(--faint);
    margin: .2rem 0 0;
}
.sr-help { color: var(--border); margin-top: .5rem; }

@media (max-width: 560px) {
    .post-row-link { grid-template-columns: 1fr; gap: .35rem; }
    .post-row-date { padding-top: 0; }
    .post-nav { grid-template-columns: 1fr; }
    .post-nav-next { text-align: left; align-items: flex-start; }
    .post-body { font-size: 1rem; }
    .code-wrap code { font-size: .76rem; }
    .code-copy { opacity: 1; }
    .share-label { min-width: 100%; }
    .sr-panel { padding: 1.1rem 1rem 1rem; }
    .sr-help { display: none; }
}

/* ============================================================
   Phone polish
   ============================================================ */

/* Grey flash on tap looks like a bug on a dark theme. */
a, button { -webkit-tap-highlight-color: transparent; }

/* A long URL or an unbroken identifier must not widen the page. */
.post-body { overflow-wrap: anywhere; }
.post-body p, .post-body li { overflow-wrap: break-word; }

/* Nothing may scroll the body sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 560px) {
    /* Thumb-sized targets. Anything a finger aims at gets ~44px. */
    .tool-btn { padding: .62rem .85rem; font-size: .78rem; }
    .sr-btn { padding: .68rem 1rem; font-size: .8rem; }
    .sr-mini { padding: .68rem .9rem; }
    .sr-close { padding: .5rem; top: .5rem; right: .5rem; }
    .code-copy { padding: .45rem .6rem; }
    .link-btn { padding: .25rem 0; }
    .post-row-link { padding: 1.1rem 0; }
    .nav a { padding: 6px 9px; }

    /* The speed reader is the one thing that goes full-bleed: on a phone
       it is the whole screen, so it should behave like it. */
    .sr-overlay { padding: 0; align-items: stretch; }
    .sr-panel {
        width: 100%;
        border: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }
    .sr-stage { padding: 1.4rem 0 1.2rem; }
    .sr-controls { gap: .4rem; }
    .sr-wpm { min-width: 4rem; }

    /* Long headings inside a post shouldn't tower over the body text. */
    .post-body h2 { font-size: 1.38rem; margin: 2.1rem 0 .7rem; }
    .post-body h3 { font-size: 1.16rem; }
    .post-title { line-height: 1.18; }
    .post-head { padding-top: 2rem; }

    /* Anchors are hover-only affordances; on touch they are noise. */
    .anchor { display: none; }
}

/* Phones in landscape have almost no height — give the reader the room. */
@media (max-height: 460px) {
    .sr-stage { padding: .8rem 0 .6rem; }
    .sr-help { display: none; }
}