/* ================= blog-base.css =================
   publicspace.net blog — structure, rhythm and responsive
   behaviour only. Contains no colours and no typefaces:
   every value comes from custom properties that the
   direction layer (blog-d.css) defines.

   Load order matters:
       <link rel="stylesheet" href="/css/blog-base.css">
       <link rel="stylesheet" href="/css/blog-d.css">

   Applies to /blog/, /focus/ and the guide pages, which
   all share the same shell and class names.
   ================================================= */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, pre, table { margin: 0; padding: 0; }
.nav-links, .footer-links, .post-list { list-style: none; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
::selection { background: var(--sel); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }


/* ---------------- navigation ---------------- */

.nav-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border-light);
}

.nav-content {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav-brand { display: flex; align-items: baseline; gap: 12px; }
.nav-links { display: flex; gap: 28px; }


/* ---------------- page shell ---------------- */

.blog-main {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 72px 28px 24px;
}

.post-content,
.blog-index-header p { max-width: var(--measure); }


/* ---------------- index ---------------- */

.blog-index-header { margin-bottom: 46px; }
.blog-index-header p { margin-top: 10px; }

.blog-year {
    margin: 46px 0 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.blog-index-header + .blog-year { margin-top: 0; }

.post-list li {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--border-light);
}
.post-list li:last-child { border-bottom: none; }

.post-date { flex: 0 0 var(--label-w); }


/* ---------------- article ---------------- */

.post-header { margin-bottom: 42px; }
.post-meta { margin-top: 14px; }

.post-content > * + * { margin-top: 1.15em; }
.post-content h2 { margin-top: 2.1em; }
.post-content h3 { margin-top: 1.8em; }
.post-content h2 + *,
.post-content h3 + * { margin-top: 0.65em; }

.post-content ul,
.post-content ol { padding-left: 1.25em; }
.post-content li + li { margin-top: 0.5em; }
.post-content li > ul { margin-top: 0.5em; }

/* no drop shadow: your screenshots are macOS windows that
   already carry one, and the CSS shadow double-frames them */
.post-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2em auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
    font-family: var(--sans);
    font-size: 15.5px;
}
.post-content th,
.post-content td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}
.post-content thead th { border-bottom: 1px solid var(--border); }

.post-content pre {
    background: var(--bg-alt);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 16px;
    margin: 2em 0;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.6;
}
.post-content code { font-family: var(--mono); font-size: 0.88em; }
.post-content :not(pre) > code {
    background: var(--bg-alt);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 0.1em 0.35em;
}

.post-content hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 2.6em 0;
}

.post-footer-nav {
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    font-size: 15px;
}


/* ---------------- footer ---------------- */

.footer {
    border-top: 1px solid var(--border-light);
    background: var(--bg-alt);
    padding: 30px 40px;
    margin-top: 64px;
}
.footer-content {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    justify-content: space-between;
    align-items: center;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a,
.footer-copyright { font-size: 13px; color: var(--ink-soft); }


/* ---------------- narrow viewports ---------------- */

@media (max-width: 760px) {
    .nav-content { padding: 0 18px; }
    .nav-brand-tagline { display: none; }
    .nav-links { gap: 20px; }

    .blog-main { padding: 40px 20px 16px; }

    /* label above the title rather than a fixed 56px gutter —
       returns roughly 15% of the line to the title on a phone */
    .post-list li {
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        padding: 13px 0;
    }
    .post-date { flex: none; }

    .post-content table { display: block; overflow-x: auto; }

    .footer { padding: 26px 18px; }
}