:root {
    --bg: #F4F5F3;
    --text: #151A21;
    --accent: #2F6F6A;
    /* 5.29:1 on --bg. The previous #6B7280 was 4.42:1, under WCAG AA. */
    --muted: #5F6672;
    --container-width: 700px;
}

/* System preference, unless the toggle has explicitly asked for light. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #151A21;
        --text: #CBD1D6;
        /* 6.87:1 on the dark ground. The same #6B7280 was only 3.61:1 there,
           which made secondary text hard to read and left it looking unrelated
           to the body copy beside it. */
        --muted: #9BA3AF;
    }

    :root:not([data-theme="light"]) .content pre.shiki {
        background-color: var(--shiki-dark-bg);
        color: var(--shiki-dark);
    }

    :root:not([data-theme="light"]) .content pre.shiki span {
        color: var(--shiki-dark);
    }
}

:root[data-theme="dark"] .content pre.shiki {
    background-color: var(--shiki-dark-bg);
    color: var(--shiki-dark);
}

:root[data-theme="dark"] .content pre.shiki span {
    color: var(--shiki-dark);
}

/* An explicit choice from the toggle wins either way. */
:root[data-theme="dark"] {
    --bg: #151A21;
    --text: #CBD1D6;
    --muted: #9BA3AF;
}

* {
    box-sizing: border-box;
    border: none !important;
}

.material-symbols-outlined {
    display: inline-block;
    vertical-align: middle;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: "Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
    line-height: 1.7;
    font-size: 0.95rem;
    margin: 0;
    padding: 0;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 2rem;
    width: 100%;
}

nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.menu {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.menu-icon {
    color: var(--muted);
    transition: color 0.2s ease;
    cursor: pointer;
    background: transparent !important;
    border: none !important;
    padding: 0;
    display: flex;
    align-items: center;
}

.menu-icon:hover {
    color: var(--accent);
    text-decoration: none;
}

.menu-icon .material-symbols-outlined {
    font-size: 20px;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

::selection {
    background-color: var(--accent);
    color: #fff;
}

.logo {
    font-family: "Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: none !important;
    color: var(--text);
}

/* The mark and the wordmark are two separate things sitting together, so a
   container owns the spacing rather than the text flow. */
.logo-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-text {
    display: block;
    line-height: 1;
}

/* The favicon, shown as the logo mark. It is a painting on a white ground, so
   it keeps that ground in dark mode and gets a hairline instead of floating. */
.logo-mark {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 2px;
}



.logo:hover {
    text-decoration: none !important;
    opacity: 0.8;
}

.tagline {
    color: var(--muted);
    font-family: "Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
    font-size: 1.05rem;
    text-transform: lowercase;
    margin: 0 0 2.5rem 0;
}

.about-content {
    margin-top: 1.5rem;
}

.post-header {
    margin-bottom: 1.5rem;
}

.share-post {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(128, 128, 128, 0.1);
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-family: "JetBrains Mono", "SF Mono", "Monaco", "Noto Sans Thai", monospace;
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

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

.share-post .material-symbols-outlined {
    font-size: 18px;
}

.post-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem 0;
}

.meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.date {
    color: var(--muted);
    font-size: 0.9rem;
    font-family: "JetBrains Mono", "SF Mono", "Monaco", "Noto Sans Thai", monospace;
    font-variant-numeric: tabular-nums;
}

.date::before {
    content: "[ ";
    opacity: 0.5;
}

.date::after {
    content: " ]";
    opacity: 0.5;
}

.description {
    color: var(--muted);
    font-size: 1rem;
    font-style: italic;
}

.content {
    font-size: 1.05rem;
}

.content h2 {
    font-family: "Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 3rem 0 1rem 0;
}

.content h2::before {
    content: "# ";
    opacity: 0.3;
    font-size: 1.2rem;
}

.content h3 {
    font-family: "Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
}

.cover img {
    display: block;
    margin: 0 0 1.5rem 0;
    max-width: 100%;
    height: auto;
}

.content p {
    margin: 0 0 1.5rem 0;
}

.content img {
    display: block;
    margin: 2rem auto;
    max-width: 100%;
    height: auto;
}

.content ul,
.content ol {
    margin: 0 0 1.5rem 0;
    padding-left: 2rem;
}

.content li {
    margin: 0.5rem 0;
}

.content code {
    background: rgba(128, 128, 128, 0.1);
    font-family: "JetBrains Mono", "SF Mono", "Monaco", "Noto Sans Thai", monospace;
    font-size: 0.9em;
    padding: 0.2em 0.4em;
}

.content pre {
    background: rgba(128, 128, 128, 0.1);
    font-family: "JetBrains Mono", "SF Mono", "Monaco", "Noto Sans Thai", monospace;
    font-size: 0.9rem;
    overflow-x: auto;
    padding: 1rem;
    margin: 0 0 1.5rem 0;
}

.content pre code {
    background: none;
    padding: 0;
}

.content pre.shiki {
    background-color: var(--shiki-light-bg);
    color: var(--shiki-light);
}

.content pre.shiki span {
    color: var(--shiki-light);
}

.content blockquote {
    color: var(--muted);
    font-style: italic;
    margin: 0 0 1.5rem 0;
    padding-left: 2rem;
    position: relative;
}

.content blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--muted);
    opacity: 0.3;
}

.content hr {
    margin: 3rem 0;
    opacity: 0.3;
}

.content hr::after {
    content: "* * *";
    display: block;
    text-align: center;
    font-size: 1.2rem;
    color: var(--muted);
}

/* Home page specific styles */
.home-wrapper {
    display: flex;
    flex-direction: column;
}



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

.home-wrapper h2,
.projects h2 {
    font-family: "Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
    font-size: 1.2rem;
    color: var(--text);
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.post-list-item {
    margin: 1.4rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    line-height: 1.5;
}

.post-list-item > div:first-child {
    flex: 1;
    min-width: 0;
}

.post-list-item .post-title {
    color: var(--text);
    font-size: 1.2rem;
}

.post-list-item .post-meta {
    color: var(--muted);
    font-family: "JetBrains Mono", "SF Mono", "Monaco", "Noto Sans Thai", monospace;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.post-description {
    color: var(--muted);
    font-size: 0.95rem;
    margin-top: 0.35rem;
}

.footer {
    padding: 2rem 0 1.5rem 0;
    margin-top: 3rem;
    border-top: 1px solid rgba(128, 128, 128, 0.2) !important;
}

.social-links {
    display: flex;
    align-items: center;
    /* 1rem here plus the 0.25rem padding on each icon reads as the same
       24px gap as before, while giving each link a 28px hit area. */
    gap: 1rem;
    justify-content: center;
}

.social-icon {
    color: var(--muted);
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
}

.social-icon:hover {
    color: var(--accent);
    text-decoration: none;
}

.social-icon svg {
    display: block;
}

.search-input {
    width: 100%;
    padding: 0.4rem 0.2rem;
    font-family: "Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
    font-size: 0.95rem;
    color: var(--text);
    background: transparent;
    border: none !important;
    border-bottom: 1px dashed rgba(128, 128, 128, 0.45) !important;
    border-radius: 0;
    margin-bottom: 1.75rem;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.search-input::placeholder {
    color: var(--muted);
}

.search-input:focus {
    border-color: var(--accent) !important;
}

.empty-state {
    text-align: center;
    color: var(--muted);
}

.post-nav {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(128, 128, 128, 0.2) !important;
}

.post-nav-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    max-width: 48%;
}

.post-nav-right {
    align-items: flex-end;
    text-align: right;
}

.post-nav-arrow {
    color: var(--muted);
    font-size: 0.8rem;
    font-family: "JetBrains Mono", "SF Mono", "Monaco", "Noto Sans Thai", monospace;
}

.post-nav-title {
    color: var(--text);
    font-size: 0.95rem;
}

a.post-nav-title:hover {
    color: var(--accent);
    text-decoration: none;
}

.tag {
    display: inline-block;
    font-family: "JetBrains Mono", "SF Mono", "Monaco", "Noto Sans Thai", monospace;
    font-size: 0.75rem;
    color: var(--muted);
    text-decoration: none;
    padding: 0.15rem 0.5rem;
    margin-right: 0.4rem;
    border-radius: 3px;
    background: rgba(128, 128, 128, 0.1);
}

.tag:hover {
    color: var(--accent);
    text-decoration: none;
}

.post-tags {
    display: block;
    margin-bottom: 1rem;
}

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

.tag-list li {
    margin: 0.5rem 0;
}

.tag-count {
    font-family: "JetBrains Mono", "SF Mono", "Monaco", "Noto Sans Thai", monospace;
    font-size: 0.8rem;
    color: var(--muted);
}

/* Projects — standalone demos linked from the footer of every page.
   The bare `nav` rule above lays the site header out as a flex row, so this
   block has to opt back out of it. */
.projects {
    display: block;
    margin-bottom: 2rem;
}

.projects ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.projects li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.projects li span {
    color: var(--muted);
    font-size: 0.85rem;
}

/* A diagram with four lifelines outgrows the 700px column. On a wide screen it
   reaches into the gutters either side, centred, by half of what it gains. The
   percentage resolves against the column, so the same rule serves this layout
   and the static post page, whose box models differ. */
.wide-figure {
    margin: 2.25rem 0;
    overflow-x: auto;
}

.wide-figure svg {
    max-width: 100%;
    min-width: 560px;
    height: auto;
    display: block;
}

.wide-figure figcaption {
    font-size: .85rem;
    opacity: .7;
    margin-top: .85rem;
    line-height: 1.5;
}

@media (min-width: 1060px) {
    .wide-figure {
        width: 920px;
        margin-left: calc((920px - 100%) / -2);
        overflow-x: visible;
    }

    .wide-figure svg {
        min-width: 0;
    }
}

.lang-badge {
    display: inline-block;
    font-family: "JetBrains Mono", "SF Mono", "Monaco", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    background: rgba(128, 128, 128, 0.1);
    padding: 0.1rem 0.4rem;
    margin-left: 0.5rem;
    border-radius: 3px;
    vertical-align: 0.12em;
}