/* Braindump - txt.krisztian.wtf
   Fresh look: off-white paper + dark gray serif text.
   Night mode follows the OS setting (prefers-color-scheme), no manual toggle.
   Contrast checked: body ~13:1, muted ~5:1, links ~6.7:1 (light) / ~11:1 (dark). */

:root {
    color-scheme: light dark;

    /* Source Serif 4 for text, Fraunces for headlines (Google Fonts), both
       with a system serif fallback */
    --font-serif: "Source Serif 4", ui-serif, "Iowan Old Style",
        "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif;
    --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", Times,
        serif;

    /* light */
    --bg: #f7f4ef;
    --fg: #2a2825;
    --muted: #6e6a60;
    --link: #9a3412;
    --link-hover: #7c2505;
    --line: rgba(42, 40, 37, 0.16);
    --code-bg: #efeae0;
    --mark-bg: #f2dc9f;

    /* rouge token colors, light */
    --tok-comment: #7d7668;
    --tok-keyword: #7c2505;
    --tok-string: #6f5210;
    --tok-number: #5c4a86;
    --tok-function: #245a4b;
    --tok-operator: #5a4632;
    --tok-tag: #7c2505;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* dark: the near-black bg + off-white text combination caused halation
           (text read dim and smudged). Lifting the bg and brightening the
           text keeps contrast high without the glow. */
        --bg: #1b1917;
        --fg: #f0ece2;
        --muted: #b3ab9d;
        --link: #eda468;
        --link-hover: #f7bd88;
        --line: rgba(240, 236, 226, 0.2);
        --code-bg: #262320;
        --mark-bg: #57492a;

        /* rouge token colors, dark */
        --tok-comment: #a49b87;
        --tok-keyword: #eda468;
        --tok-string: #e0bd72;
        --tok-number: #c1b1e8;
        --tok-function: #8bcfb6;
        --tok-operator: #d8cec0;
        --tok-tag: #eda468;
    }
}

* {
    box-sizing: border-box;
}

html {
    font-size: 17px;
}

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

wrapper {
    display: block;
    max-width: 40rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}

/* headings: Fraunces at its own axis defaults (SOFT 0, WONK 1 - the font
   ships wonk on), weight 600, no uppercase shout */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin: 2rem 0 0.75rem;
}

h1 {
    font-size: 2rem;
    margin-top: 0;
}

/* homepage masthead: larger than article headings (it sets the page's tone
   and is only a few words long) */
main section:first-of-type h1 {
    font-size: clamp(2.4rem, 7.5vw, 3.1rem);
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0;
}

main section:first-of-type p {
    margin: 0.5rem 0 0;
}

/* gap between the masthead block and the first entry */
main > section + section {
    margin-top: 3rem;
}

h2 {
    font-size: 1.45rem;
}

h3 {
    font-size: 1.2rem;
}

p {
    margin: 0 0 1.1rem;
}

/* links */
a {
    color: var(--link);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--link-hover);
}

/* outbound links (added by scripts/external-links.py at build) get
   the same lucide arrow-up-right icon krisztian.wtf uses */
/* Outbound link icon */
a.ext::after {
  background: currentColor;
  content: "";
  display: inline-block;
  height: 0.8em;
  margin-left: 0.2em;
  width: 0.8em;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E") no-repeat center/contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E") no-repeat center/contain;
    vertical-align: -0.1em;
}

/* Inline nav arrows: Libre Baskerville ships no arrow glyphs (verified in all
   four Google subsets), so a Unicode arrow would come from whatever fallback
   font the OS picks. Same lucide family as the outbound-link icon instead. */
.icon-arrow-right::after,
.icon-arrow-left::before {
    background: currentColor;
    content: "";
    display: inline-block;
    height: 0.75em;
    vertical-align: -0.06em;
    width: 0.75em;
    mask: no-repeat center/contain;
    -webkit-mask: no-repeat center/contain;
}

.icon-arrow-right::after {
    margin-left: 0.35em;
    /* lucide move-right */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8L22 12L18 16'%3E%3C/path%3E%3Cpath d='M2 12H22'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8L22 12L18 16'%3E%3C/path%3E%3Cpath d='M2 12H22'%3E%3C/path%3E%3C/svg%3E");
}

.icon-arrow-left::before {
    margin-right: 0.35em;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'%3E%3C/path%3E%3Cpath d='m12 19-7-7 7-7'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'%3E%3C/path%3E%3Cpath d='m12 19-7-7 7-7'%3E%3C/path%3E%3C/svg%3E");
}

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

::selection {
    background: var(--mark-bg);
    color: var(--fg);
}

/* inline code + code fences stay monospace (code in serif is unreadable) */
code, kbd, samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

p code, li code {
    display: inline-block;
    background: var(--code-bg);
    border-radius: 4px;
    font-size: 0.82em;
    padding: 0.1em 0.4em;
}

pre {
    background: var(--code-bg);
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.6;
    margin: 1.4rem 0;
    overflow-x: auto;
    padding: 1rem 1.15rem;
}

pre code {
    background: transparent;
    display: block;
    font-size: inherit;
    padding: 0;
}

/* rouge token mapping */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cp, .highlight .cs { color: var(--tok-comment); font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { color: var(--tok-keyword); font-weight: 600; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx { color: var(--tok-string); }
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo { color: var(--tok-number); }
.highlight .n, .highlight .na, .highlight .nb, .highlight .nc, .highlight .nf, .highlight .nl, .highlight .nn, .highlight .nv, .highlight .nx { color: var(--tok-function); }
.highlight .o, .highlight .p { color: var(--tok-operator); }
.highlight .nt { color: var(--tok-tag); }

/* prose bits */
blockquote {
    border-left: 3px solid var(--line);
    color: var(--muted);
    font-style: italic;
    margin: 1.5rem 0;
    padding: 0.1em 0 0.1em 1.25em;
}

/* paragraphs inside a quote: no trailing margin, so no phantom gap below */
blockquote p {
    margin: 0 0 0.5rem;
}

blockquote p:last-child {
    margin: 0;
}

mark {
    background: var(--mark-bg);
    color: var(--fg);
    padding: 0 0.15em;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2.5rem 0;
}

ul, ol {
    padding-left: 1.4rem;
    margin: 0 0 1.1rem;
}

li {
    margin: 0.3rem 0;
}

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

img + em, figcaption {
    color: var(--muted);
    display: block;
    font-size: 0.85rem;
    margin: -1.25rem auto 1.75rem;
    text-align: center;
}

/* home post list + post meta + crumbs */
footer {
    color: var(--muted);
    font-size: 0.9em;
    margin-top: 2.75rem;
}

/* home entries: title, date, formatted preview, read more */
.post-item + .post-item {
    border-top: 1px solid var(--line);
    padding-top: 2.25rem;
}

.post-item {
    margin-bottom: 2.25rem;
}

.post-item:last-of-type {
    margin-bottom: 0.5rem;
}

.post-title {
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 0 0 0.35rem;
}

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

.post-title a:hover {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.post-item .post-meta {
    margin: 0 0 1rem;
}

/* preview keeps the article's own formatting, cut after two blocks; body
   colour, only the date stays muted (consistent with the article page) */
.post-excerpt {
    color: var(--fg);
    font-size: 0.95em;
    line-height: 1.65;
}

.post-excerpt p {
    margin: 0 0 0.65rem;
}

.post-excerpt > :last-child {
    margin-bottom: 0;
}

.post-excerpt blockquote {
    font-size: 0.95em;
    margin: 0.65rem 0;
}

.post-more {
    font-size: 0.95em;
    margin: 0.9rem 0 0;
}

.post-more a {
    text-decoration: none;
}

.post-more a:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Article head: the share card's layout (tools/gen-og.mjs), user-tuned.
   Sizes are whole px, like the card - rem against the 17px base would give
   fractional values (1.15rem = 19.55px). Body text stays in rem, so it still
   follows the browser's font-size preference; this head is a fixed block. */
.post-head {
    align-items: baseline;
    display: flex;
    gap: 17px;
    justify-content: space-between;
    margin: 0 0 23px;
}

.post-head .post-meta {
    font-size: 16px;
    margin: 0;
    white-space: nowrap;
}

.post-rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 23px 0 16px;
}

/* the article title: 38px against a 20px wordmark (the card uses 2.6x) */
article > header h1 {
    font-size: clamp(29px, 5.87vw, 38px);
    letter-spacing: -0.02em;
    line-height: 1.06;
}

.site-mark {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

.site-mark a {
    color: var(--fg);
    text-decoration: none;
}

.site-mark a:hover {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* article rhythm: the crumb sets the gap above the title, the date sets the
   gap below it (no negative-margin hacks) */
.crumb {
    margin: 0 0 2rem;
}

article > header h1 {
    margin-top: 0;
}

.post-meta {
    color: var(--muted);
    font-size: 0.9em;
    margin: 0.45rem 0 1.9rem;
}

hr + .crumb {
    margin-top: 2.25rem;
}

.crumb {
    font-size: 0.9em;
}

@media (max-width: 30rem) {
    wrapper {
        padding: 2rem 1.2rem 4rem;
    }

    .post-title {
        font-size: 1.25rem;
    }
}