/* bcastell.com -- single stylesheet, no framework, no JS.
   Light/dark follows the OS via prefers-color-scheme. */

@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter-Italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("/fonts/Manrope.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #ffffff;
    --bg-alt: #f4f5f7;
    --text: #1c2128;
    --text-muted: #59636e;
    --accent: #0b6bcb;
    --border: #d7dde3;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14181d;
        --bg-alt: #1d232a;
        --text: #d7dde3;
        --text-muted: #8b949e;
        --accent: #58a6ff;
        --border: #30363d;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    padding: 0 1.25rem;
    max-width: 46rem;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    background: var(--bg);
    color: var(--text);
}

/* Header / nav */

.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 1.5rem 0 1rem;
    border-bottom: 1px solid var(--border);
}

.site-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.site-header nav {
    display: flex;
    gap: 1.1rem;
}

.site-header nav a {
    color: var(--text-muted);
    text-decoration: none;
}

.site-header nav a:hover {
    color: var(--accent);
}

main {
    padding: 1.5rem 0 2.5rem;
}

/* Typography */

h1, h2, h3, h4, .site-title {
    font-family: "Manrope", "Inter", system-ui, sans-serif;
    font-weight: 800;
    line-height: 1.25;
}

h1, h2, h3, h4 {
    margin: 1.75em 0 0.5em;
}

main > article > h1:first-child,
.home-intro h1 {
    margin-top: 0;
}

a {
    color: var(--accent);
}

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

img, video, iframe {
    max-width: 100%;
    height: auto;
}

blockquote {
    margin: 1rem 0;
    padding: 0.25rem 1rem;
    border-left: 3px solid var(--border);
    color: var(--text-muted);
}

table {
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}

th, td {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
}

/* Code */

code, kbd, samp, pre {
    font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
    line-height: 1.35;
}

code {
    font-size: 0.9em;
    background: var(--bg-alt);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

pre {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.9rem 1rem;
    overflow-x: auto;
}

pre code {
    background: none;
    padding: 0;
    font-size: 0.875rem;
}

/* Cards: bordered content blocks, used for list entries and content
   sections (raw <div class="card"> in Markdown works via goldmark unsafe). */

.card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
}

.card > h2:first-child,
.card > h3:first-child {
    margin-top: 0;
}

/* Post metadata and lists */

.meta, .tags {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.meta a, .tags a {
    color: var(--text-muted);
}

.meta a:hover, .tags a:hover {
    color: var(--accent);
}

.cover {
    border-radius: 6px;
    margin: 0.5rem 0 1rem;
}

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

.post-list li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 1rem;
    margin: 0.6rem 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.15s;
}

.post-list li:hover {
    border-color: var(--accent);
}

.post-list time {
    flex: none;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

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

.post-list a:hover {
    text-decoration: underline;
}

/* Forms (contact page) */

input, textarea, button {
    font: inherit;
    color: inherit;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
}

button {
    cursor: pointer;
}

button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Footer */

.site-footer {
    padding: 1rem 0 2rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.9375rem;
}

/* Chroma syntax highlighting -- github (light) */
/* Generated using: hugo gen chromastyles --style=github */

/* Background */ .bg { background-color:#f7f7f7; }
/* PreWrapper */ .chroma { background-color:#f7f7f7;-webkit-text-size-adjust:none; }
/* Error */ .chroma .err { color:#f6f8fa;background-color:#82071e }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ .chroma .hl { background-color:#dedede }
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { color:#cf222e }
/* KeywordConstant */ .chroma .kc { color:#cf222e }
/* KeywordDeclaration */ .chroma .kd { color:#cf222e }
/* KeywordNamespace */ .chroma .kn { color:#cf222e }
/* KeywordPseudo */ .chroma .kp { color:#cf222e }
/* KeywordReserved */ .chroma .kr { color:#cf222e }
/* KeywordType */ .chroma .kt { color:#cf222e }
/* NameAttribute */ .chroma .na { color:#1f2328 }
/* NameClass */ .chroma .nc { color:#1f2328 }
/* NameConstant */ .chroma .no { color:#0550ae }
/* NameDecorator */ .chroma .nd { color:#0550ae }
/* NameEntity */ .chroma .ni { color:#6639ba }
/* NameLabel */ .chroma .nl { color:#900;font-weight:bold }
/* NameNamespace */ .chroma .nn { color:#24292e }
/* NameOther */ .chroma .nx { color:#1f2328 }
/* NameTag */ .chroma .nt { color:#0550ae }
/* NameBuiltin */ .chroma .nb { color:#6639ba }
/* NameBuiltinPseudo */ .chroma .bp { color:#6a737d }
/* NameVariable */ .chroma .nv { color:#953800 }
/* NameVariableClass */ .chroma .vc { color:#953800 }
/* NameVariableGlobal */ .chroma .vg { color:#953800 }
/* NameVariableInstance */ .chroma .vi { color:#953800 }
/* NameVariableMagic */ .chroma .vm { color:#953800 }
/* NameFunction */ .chroma .nf { color:#6639ba }
/* NameFunctionMagic */ .chroma .fm { color:#6639ba }
/* LiteralString */ .chroma .s { color:#0a3069 }
/* LiteralStringAffix */ .chroma .sa { color:#0a3069 }
/* LiteralStringBacktick */ .chroma .sb { color:#0a3069 }
/* LiteralStringChar */ .chroma .sc { color:#0a3069 }
/* LiteralStringDelimiter */ .chroma .dl { color:#0a3069 }
/* LiteralStringDoc */ .chroma .sd { color:#0a3069 }
/* LiteralStringDouble */ .chroma .s2 { color:#0a3069 }
/* LiteralStringEscape */ .chroma .se { color:#0a3069 }
/* LiteralStringHeredoc */ .chroma .sh { color:#0a3069 }
/* LiteralStringInterpol */ .chroma .si { color:#0a3069 }
/* LiteralStringOther */ .chroma .sx { color:#0a3069 }
/* LiteralStringRegex */ .chroma .sr { color:#0a3069 }
/* LiteralStringSingle */ .chroma .s1 { color:#0a3069 }
/* LiteralStringSymbol */ .chroma .ss { color:#032f62 }
/* LiteralNumber */ .chroma .m { color:#0550ae }
/* LiteralNumberBin */ .chroma .mb { color:#0550ae }
/* LiteralNumberFloat */ .chroma .mf { color:#0550ae }
/* LiteralNumberHex */ .chroma .mh { color:#0550ae }
/* LiteralNumberInteger */ .chroma .mi { color:#0550ae }
/* LiteralNumberIntegerLong */ .chroma .il { color:#0550ae }
/* LiteralNumberOct */ .chroma .mo { color:#0550ae }
/* Operator */ .chroma .o { color:#0550ae }
/* OperatorWord */ .chroma .ow { color:#0550ae }
/* OperatorReserved */ .chroma .or { color:#0550ae }
/* Punctuation */ .chroma .p { color:#1f2328 }
/* Comment */ .chroma .c { color:#57606a }
/* CommentHashbang */ .chroma .ch { color:#57606a }
/* CommentMultiline */ .chroma .cm { color:#57606a }
/* CommentSingle */ .chroma .c1 { color:#57606a }
/* CommentSpecial */ .chroma .cs { color:#57606a }
/* CommentPreproc */ .chroma .cp { color:#57606a }
/* CommentPreprocFile */ .chroma .cpf { color:#57606a }
/* GenericDeleted */ .chroma .gd { color:#82071e;background-color:#ffebe9 }
/* GenericEmph */ .chroma .ge { color:#1f2328 }
/* GenericInserted */ .chroma .gi { color:#116329;background-color:#dafbe1 }
/* GenericOutput */ .chroma .go { color:#1f2328 }
/* GenericUnderline */ .chroma .gl { text-decoration:underline }
/* TextWhitespace */ .chroma .w { color:#fff }

/* Chroma syntax highlighting -- github-dark */
@media (prefers-color-scheme: dark) {
    /* Generated using: hugo gen chromastyles --style=github-dark */
    
    /* Background */ .bg { color:#e6edf3;background-color:#0d1117; }
    /* PreWrapper */ .chroma { color:#e6edf3;background-color:#0d1117;-webkit-text-size-adjust:none; }
    /* Error */ .chroma .err { color:#f85149 }
    /* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
    /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
    /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
    /* LineHighlight */ .chroma .hl { background-color:#6e7681 }
    /* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#737679 }
    /* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681 }
    /* Line */ .chroma .line { display:flex; }
    /* Keyword */ .chroma .k { color:#ff7b72 }
    /* KeywordConstant */ .chroma .kc { color:#79c0ff }
    /* KeywordDeclaration */ .chroma .kd { color:#ff7b72 }
    /* KeywordNamespace */ .chroma .kn { color:#ff7b72 }
    /* KeywordPseudo */ .chroma .kp { color:#79c0ff }
    /* KeywordReserved */ .chroma .kr { color:#ff7b72 }
    /* KeywordType */ .chroma .kt { color:#ff7b72 }
    /* NameClass */ .chroma .nc { color:#f0883e;font-weight:bold }
    /* NameConstant */ .chroma .no { color:#79c0ff;font-weight:bold }
    /* NameDecorator */ .chroma .nd { color:#d2a8ff;font-weight:bold }
    /* NameEntity */ .chroma .ni { color:#ffa657 }
    /* NameException */ .chroma .ne { color:#f0883e;font-weight:bold }
    /* NameLabel */ .chroma .nl { color:#79c0ff;font-weight:bold }
    /* NameNamespace */ .chroma .nn { color:#ff7b72 }
    /* NameOther */ .chroma .nx { color:#e6edf3 }
    /* NameProperty */ .chroma .py { color:#79c0ff }
    /* NameTag */ .chroma .nt { color:#7ee787 }
    /* NameVariable */ .chroma .nv { color:#79c0ff }
    /* NameVariableClass */ .chroma .vc { color:#79c0ff }
    /* NameVariableGlobal */ .chroma .vg { color:#79c0ff }
    /* NameVariableInstance */ .chroma .vi { color:#79c0ff }
    /* NameVariableMagic */ .chroma .vm { color:#79c0ff }
    /* NameFunction */ .chroma .nf { color:#d2a8ff;font-weight:bold }
    /* NameFunctionMagic */ .chroma .fm { color:#d2a8ff;font-weight:bold }
    /* Literal */ .chroma .l { color:#a5d6ff }
    /* LiteralDate */ .chroma .ld { color:#79c0ff }
    /* LiteralString */ .chroma .s { color:#a5d6ff }
    /* LiteralStringAffix */ .chroma .sa { color:#79c0ff }
    /* LiteralStringBacktick */ .chroma .sb { color:#a5d6ff }
    /* LiteralStringChar */ .chroma .sc { color:#a5d6ff }
    /* LiteralStringDelimiter */ .chroma .dl { color:#79c0ff }
    /* LiteralStringDoc */ .chroma .sd { color:#a5d6ff }
    /* LiteralStringDouble */ .chroma .s2 { color:#a5d6ff }
    /* LiteralStringEscape */ .chroma .se { color:#79c0ff }
    /* LiteralStringHeredoc */ .chroma .sh { color:#79c0ff }
    /* LiteralStringInterpol */ .chroma .si { color:#a5d6ff }
    /* LiteralStringOther */ .chroma .sx { color:#a5d6ff }
    /* LiteralStringRegex */ .chroma .sr { color:#79c0ff }
    /* LiteralStringSingle */ .chroma .s1 { color:#a5d6ff }
    /* LiteralStringSymbol */ .chroma .ss { color:#a5d6ff }
    /* LiteralNumber */ .chroma .m { color:#a5d6ff }
    /* LiteralNumberBin */ .chroma .mb { color:#a5d6ff }
    /* LiteralNumberFloat */ .chroma .mf { color:#a5d6ff }
    /* LiteralNumberHex */ .chroma .mh { color:#a5d6ff }
    /* LiteralNumberInteger */ .chroma .mi { color:#a5d6ff }
    /* LiteralNumberIntegerLong */ .chroma .il { color:#a5d6ff }
    /* LiteralNumberOct */ .chroma .mo { color:#a5d6ff }
    /* Operator */ .chroma .o { color:#ff7b72;font-weight:bold }
    /* OperatorWord */ .chroma .ow { color:#ff7b72;font-weight:bold }
    /* OperatorReserved */ .chroma .or { color:#ff7b72;font-weight:bold }
    /* Comment */ .chroma .c { color:#8b949e;font-style:italic }
    /* CommentHashbang */ .chroma .ch { color:#8b949e;font-style:italic }
    /* CommentMultiline */ .chroma .cm { color:#8b949e;font-style:italic }
    /* CommentSingle */ .chroma .c1 { color:#8b949e;font-style:italic }
    /* CommentSpecial */ .chroma .cs { color:#8b949e;font-weight:bold;font-style:italic }
    /* CommentPreproc */ .chroma .cp { color:#8b949e;font-weight:bold;font-style:italic }
    /* CommentPreprocFile */ .chroma .cpf { color:#8b949e;font-weight:bold;font-style:italic }
    /* GenericDeleted */ .chroma .gd { color:#ffa198;background-color:#490202 }
    /* GenericEmph */ .chroma .ge { font-style:italic }
    /* GenericError */ .chroma .gr { color:#ffa198 }
    /* GenericHeading */ .chroma .gh { color:#79c0ff;font-weight:bold }
    /* GenericInserted */ .chroma .gi { color:#56d364;background-color:#0f5323 }
    /* GenericOutput */ .chroma .go { color:#8b949e }
    /* GenericPrompt */ .chroma .gp { color:#8b949e }
    /* GenericStrong */ .chroma .gs { font-weight:bold }
    /* GenericSubheading */ .chroma .gu { color:#79c0ff }
    /* GenericTraceback */ .chroma .gt { color:#ff7b72 }
    /* GenericUnderline */ .chroma .gl { text-decoration:underline }
    /* TextWhitespace */ .chroma .w { color:#6e7681 }
}