/* NUMBERS ----------------------------------------------------------------------- */
/* SPACING ----------------------------------------------------------------------- */
/* One 4px-based scale for vertical rhythm. Use these instead of ad-hoc rem values so section, block and component spacing stay related. */
/* COLORS ------------------------------------------------------------------------ */
/* Light palette. The dark overrides live in _theme.scss; components consume the custom properties through these Sass aliases so both themes stay in one place. */
:root { color-scheme: light; --background: #f1f1f1; --color: #1a1a1a; --muted: #4a4d51; --rule: #d9dee2; --rule-strong: #b9c0c5; --surface: #fff; --surface-muted: #fafafa; --line: #e3e3e3; --link: #000; --accent: #006e52; /* Tag colours. Each label is already unique, so colour is a redundant cue. */ --tag-shopify: #006e52; --tag-open-data: #1f5f9e; --tag-iot: #6b3fa0; --tag-plugin: #8a4b00; --tag-cli: #006b73; --tag-diagnostics: #a5301f; --tag-contribution: #8a2c6a; --tag-civic-tech: #6f5200; --card-hover: rgba(74, 77, 81, 0.6); --footer-bg: #111; --footer-border: #3a3a3a; --footer-text: #a3a3a3; --footer-link: #f5f5f5; --alert-bg: #fbeae5; --alert-border: #f1c8bd; --alert-text: #8a1f0b; --alert-strong: #6b1708; --code-bg: #e8e8e8; --scroll: #d4d4d4; --syntax-comment: #5f6368; --syntax-keyword: #005a44; --syntax-string: #0a6b52; --syntax-number: #8a5a00; --syntax-error-bg: #fdecea; --syntax-error: #b3261e; --syntax-inserted: #006e52; }

/* TYPE -------------------------------------------------------------------------- */
/* Five text sizes. Anything smaller than the body uses the 14px label size; large type is only used for the page title and the intro statement. */
/* Header and footer chrome share the same size as dates and other labels; hierarchy comes from colour and weight instead. */
/* One shared style for dates, metadata, captions and other small mono labels. */
/* Quiet buttons share one shape across pagination, post actions and the 404 links: a mono label, a hairline border, equal space around an icon, and an inverted hover state. */
/* Blueprint line language. Object lines outline primary structure, fine lines carry detail, and centre lines use a long-short-long rhythm. */
/* A dimension line: a top rule with short downward end ticks, used above headings to mark their width. */
body, button, input, select, textarea { font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--color); }

body { font-size: 1rem; line-height: 1.6; font-weight: 400; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 0.75rem; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--color); overflow-wrap: anywhere; }

h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }

h2 { margin-top: 2.5rem; font-size: 1.75rem; }

h3 { margin-top: 2rem; font-size: 1.25rem; font-weight: 500; line-height: 1.3; }

h4, h5, h6 { margin-top: 2rem; font-size: 1rem; font-weight: 500; }

p { margin: 0 0 1rem; text-wrap: pretty; }

strong { font-weight: 600; }

time { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; display: block; margin-bottom: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* LISTS ------------------------------------------------------------------------- */
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

li + li { margin-top: 0.25rem; }

li > ul, li > ol { margin-top: 0.5rem; margin-bottom: 0; }

/* BLOCKQUOTES ------------------------------------------------------------------- */
blockquote { max-width: 68ch; margin: 2.5rem 0; padding: 0; text-align: center; font-family: inherit; font-style: normal; line-height: 1.5; color: var(--muted); /* Inline the quotation marks so they wrap the quote itself, rather than setting a separate oversized mark above it. */ }
blockquote p { /* The blockquote keeps the body font size so its 68ch measure matches the article column; only the quote itself steps up a size. */ max-width: 40ch; margin: 0 auto; font-size: 1.25rem; text-wrap: pretty; }
blockquote p + p { margin-top: 0.75rem; }
blockquote p:first-child::before { content: '\201C'; }
blockquote p:last-child::after { content: '\201D'; }

/* CODE -------------------------------------------------------------------------- */
code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-variant-ligatures: none; }

code { padding: 0.1em 0.3em; border: 0; background: var(--code-bg); color: var(--color); font-size: 0.9em; overflow-wrap: anywhere; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

pre { display: block; margin: 2rem 0; padding: 1rem 1.25rem; background: var(--surface-muted); border: 1px solid var(--line); color: var(--color); font-size: 0.875rem; line-height: 1.6; tab-size: 4; white-space: pre; word-wrap: normal; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
pre::-webkit-scrollbar { height: 8px; }
pre::-webkit-scrollbar-thumb { background: var(--scroll); }
pre code { padding: 0; border: 0; background: none; font-size: inherit; white-space: inherit; }

/* Rouge wrappers produced by kramdown's fenced code blocks. The card styling lives on the inner <pre>, so keep the wrapper transparent. The box bleeds into the gutter by its own padding, which keeps the code text aligned with the prose measure instead of indenting it inside the card. Scope these to block wrappers only: kramdown also puts `highlighter-rouge` on inline code. */
div.highlighter-rouge, figure.highlight { margin: 2rem 0; }

div.highlighter-rouge pre, figure.highlight pre { margin: 0; }

.post div.highlighter-rouge, .post figure.highlight { width: calc(100% + 2.5rem); max-width: calc(68ch + 2.5rem); margin: 2rem -1.25rem; }

.post > pre { width: calc(100% + 2.5rem); max-width: calc(68ch + 2.5rem); margin: 2rem -1.25rem; }

/* SYNTAX HIGHLIGHTING ----------------------------------------------------------- */
.highlight { color: var(--color); }
.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs, .highlight .cd { color: var(--syntax-comment); font-style: italic; }
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { color: var(--syntax-keyword); font-weight: 600; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .ss { color: var(--syntax-string); }
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il { color: var(--syntax-number); }
.highlight .na, .highlight .nt { color: var(--syntax-number); }
.highlight .o, .highlight .ow { color: var(--muted); }
.highlight .p { color: var(--muted); }
.highlight .err { padding: 0 0.2em; background: var(--syntax-error-bg); color: var(--syntax-error); }
.highlight .gd { color: var(--syntax-error); }
.highlight .gi { color: var(--syntax-inserted); }
.highlight .gh, .highlight .gu { color: var(--syntax-inserted); font-weight: 600; }

/* OTHER ------------------------------------------------------------------------- */
hr { height: 1px; border: 0; background-image: repeating-linear-gradient(to right, var(--rule-strong) 0 24px, transparent 24px 28px, var(--rule-strong) 28px 32px, transparent 32px 36px); margin: 2rem 0; }

html, body { background: #fff; }

/* TYPOGRAPHY -------------------------------------------------------------------- */
body { font-family: "Nimbus Roman No9 L", "Times New Roman", serif; font-size: 12pt; color: #000; }

h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }

p, blockquote, ul, ol, dl, pre { page-break-inside: avoid; }

/* INTERACTION ------------------------------------------------------------------- */
a:link, a:visited { font-weight: 700; border: 0; }
a:link:after, a:visited:after { content: " (" attr(href) ") "; color: #333; font-weight: 400; text-decoration: none; font-size: 90%; }

a[href^="/"]:after { content: " (http://erikeng.se" attr(href) ") "; }

/* LAYOUT ------------------------------------------------------------------------ */
[role=banner], [role=banner] a { color: #000; }

[role=navigation], [role=contentinfo], .posts, .fb_iframe_widget iframe { display: none; }

[role=main] { border: 0; }