/* ============================================================
scastiel.dev — "Column" (1b)
Warm & personal editorial · Source Serif 4 body / Hanken Grotesk
headings · ink-blue accent · soft cards · system + manual dark mode.
Plain CSS, no build step. All tokens are CSS custom properties so
dark mode is a single token-block swap (mirrors the light-dark()
approach). Fonts are loaded via in _includes/head.html.
============================================================ */
/* ---------- Design tokens ---------- */
:root {
--font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
--font-head: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--measure: 42rem; /* comfortable reading width */
--page: 62.5rem; /* max page width (1000px) */
--radius: 10px;
/* Light theme (default) */
--bg: #f3f1ec;
--surface: #ffffff;
--text: #201f1c;
--muted: #5f5c53;
--faint: #726d63; /* WCAG AA: 4.5:1+ on --bg and --surface */
--border: #e2ddd3;
--hair: #efeae0;
--accent: #26518f;
--accent-soft: rgba(38, 81, 143, .09);
--accent-line: rgba(38, 81, 143, .22);
--rust: #a24a25; --rust-soft: rgba(162, 74, 37, .10);
--green: #2f7d54; --green-soft: rgba(47, 125, 84, .12);
--violet: #7a5aa6; --violet-soft: rgba(122, 90, 166, .13);
--code-bg: #1b1f27; /* code stays dark in both themes */
--ph1: #e6e0d5; --ph2: #efe9de; --ph-label: #a99a80;
color-scheme: light;
}
/* Dark tokens — applied by system preference OR explicit toggle.
Kept in a reusable custom-property block via a shared selector list. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { color-scheme: dark; }
:root:not([data-theme="light"]) {
--bg:#14161b; --surface:#1b1e25; --text:#e7e3d9; --muted:#a5a298;
--faint:#8f8b80; --border:#2a2e37; --hair:#23262e; /* faint: AA 4.5:1+ on bg/surface */
--accent:#8fb0f4; --accent-soft:rgba(143,176,244,.14); --accent-line:rgba(143,176,244,.30);
--rust:#d98a5f; --rust-soft:rgba(217,138,95,.16);
--green:#7bc99a; --green-soft:rgba(123,201,154,.15);
--violet:#b79ad6; --violet-soft:rgba(183,154,214,.15);
--code-bg:#0f1116; --ph1:#222731; --ph2:#282e39; --ph-label:#5c6270;
}
}
/* Explicit manual override (header toggle sets data-theme on ) */
:root[data-theme="dark"] {
color-scheme: dark;
--bg:#14161b; --surface:#1b1e25; --text:#e7e3d9; --muted:#a5a298;
--faint:#8f8b80; --border:#2a2e37; --hair:#23262e; /* faint: AA 4.5:1+ on bg/surface */
--accent:#8fb0f4; --accent-soft:rgba(143,176,244,.14); --accent-line:rgba(143,176,244,.30);
--rust:#d98a5f; --rust-soft:rgba(217,138,95,.16);
--green:#7bc99a; --green-soft:rgba(123,201,154,.15);
--violet:#b79ad6; --violet-soft:rgba(183,154,214,.15);
--code-bg:#0f1116; --ph1:#222731; --ph2:#282e39; --ph-label:#5c6270;
}
/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 18px;
line-height: 1.7;
transition: background .25s ease, color .25s ease;
-webkit-font-smoothing: antialiased;
}
/* Keep the footer pinned to the bottom of the viewport on short pages. */
body > .wrap:last-child { margin-top: auto; }
/* The direct children of the flex-column body (header/footer `.wrap`s and the
`.page-main` content) have `margin-inline: auto`, which overrides
`align-items: stretch` and collapses them to content width — force them to
span the full page width so content lines up with the header and footer. */
body > .wrap,
body > .page-main { width: 100%; box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--accent-soft); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Inline links inside running prose must be distinguishable without relying on
colour alone (WCAG 1.4.1) — underline them like the article body does. */
.intro a, .announce p a, .project-more p a {
text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 2px;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
/* ---------- Layout wrappers ---------- */
.wrap { max-width: var(--page); margin-inline: auto; padding-inline: 20px; }
.prose { max-width: var(--measure); margin-inline: auto; }
/* index / home / text pages: a touch wider than reading measure */
.page-main { max-width: 50rem; margin-inline: auto; padding-inline: 20px; padding-bottom: 8px; }
.eyebrow { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.backlink { font-family: var(--font-head); font-size: 12px; font-weight: 600; color: var(--accent); }
/* ---------- Header / nav ---------- */
.site-header {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border);
}
.site-brand { display: inline-flex; align-items: center; gap: 10px; }
.site-brand:hover { text-decoration: none; }
.site-logo { display: block; width: 30px; height: 30px; border-radius: 8px; }
.site-title { font-family: var(--font-head); font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--text); }
.site-title span { color: var(--accent); }
.site-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-family: var(--font-head); font-weight: 500; font-size: 14px; }
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--accent); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--text); }
.theme-toggle {
font-family: var(--font-head); font-size: 12px; font-weight: 600; cursor: pointer;
color: var(--text); background: var(--surface); border: 1px solid var(--border);
border-radius: 999px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px;
}
.theme-toggle:hover { border-color: var(--accent); }
/* Hamburger toggle — hidden on wide screens & when JS is off (shown only in
the small-screen media query below, and only once JS drops the `hidden`
attribute). Styled to match the theme toggle. */
.nav-toggle {
display: none; align-items: center; gap: 9px; cursor: pointer;
font-family: var(--font-head); font-size: 13px; font-weight: 600; line-height: 1;
color: var(--text); background: var(--surface); border: 1px solid var(--border);
border-radius: 999px; padding: 7px 14px;
}
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
display: block; width: 17px; height: 2px; border-radius: 2px;
background: currentColor; transition: transform .2s ease, background .2s ease, top .2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
/* Morph the bars into an X when the menu is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
/* ---------- Footer ---------- */
.site-footer {
margin-top: 40px; padding: 26px 0; border-top: 1px solid var(--border);
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
font-family: var(--font-head); font-size: 13px; color: var(--faint);
}
.site-footer a { color: var(--faint); }
.site-footer a:hover { color: var(--accent); text-decoration: none; }
.site-footer .social { display: flex; gap: 18px; }
.footer-left { display: flex; align-items: center; gap: 18px; }
.footer-brand { display: inline-flex; }
.footer-logo { display: block; width: 26px; height: 26px; border-radius: 7px; }
/* ---------- Home intro & announcement ---------- */
.intro { max-width: 39rem; font-size: 22px; line-height: 1.6; margin: 44px 0 0; }
.announce {
margin: 26px 0 8px; padding-left: 16px; border-left: 3px solid var(--accent);
display: flex; gap: 12px; align-items: baseline; max-width: 40rem;
}
.announce .tag {
font-family: var(--font-head); font-size: 10px; font-weight: 800; letter-spacing: .08em;
color: var(--accent); white-space: nowrap; text-transform: uppercase;
}
.announce p { margin: 0; font-size: 16px; line-height: 1.5; }
/* ---------- Section headers (index + home teasers) ---------- */
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 36px 0 14px; }
.section-head .eyebrow {
margin: 0; font-family: var(--font-head); font-size: 13px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.section-head .see-all { font-family: var(--font-head); font-size: 13px; font-weight: 600; }
.see-more { text-align: center; margin: 18px 0 8px; }
.see-more .see-all { font-family: var(--font-head); font-size: 13px; font-weight: 600; }
.page-title { font-family: var(--font-head); font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 44px 0 24px; }
.page-title .count { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--faint); margin-left: 10px; }
/* ---------- Cards (shared list treatment) ---------- */
.card {
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface); transition: border-color .18s ease, box-shadow .18s ease;
}
a.card, .card--link { display: block; color: inherit; }
a.card:hover, .card--link:hover { border-color: var(--accent); box-shadow: 0 6px 18px var(--accent-soft); text-decoration: none; }
/* article row: left meta rail + body (the 1b signature) */
a.article-row { display: flex; gap: 18px; padding: 16px; margin-bottom: 10px; }
.article-row .rail {
width: 104px; flex-shrink: 0; display: flex; flex-direction: column; gap: 5px;
font-family: var(--font-head); font-size: 11px; color: var(--faint);
border-right: 1px solid var(--hair); padding-right: 14px;
}
.article-row .rail .meta { color: var(--accent); font-weight: 600; }
.article-row .rail .meta.fr { color: var(--rust); }
/* cross-posted source badge (imported articles) */
.article-row .rail .source { color: var(--violet); font-weight: 600; letter-spacing: .01em; line-height: 1.2; }
.article-row h3 { margin: 0 0 5px; font-size: 17px; font-weight: 600; line-height: 1.25; }
.article-row p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); font-family: var(--font-body); }
/* filter chips */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 24px; font-family: var(--font-head); font-size: 12px; font-weight: 600; }
.chip { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: none; cursor: pointer; }
.chip[aria-pressed="true"], .chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* language / tag pills */
.pill { font-family: var(--font-mono); font-size: 10px; font-weight: 600; border-radius: 999px; padding: 2px 8px; letter-spacing: .02em; }
.pill--en { color: var(--accent); background: var(--accent-soft); }
.pill--fr { color: var(--rust); background: var(--rust-soft); }
/* ---------- Grids for home teasers ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* ---------- Books (two-section rail + body, mirrors article-row) ---------- */
.book-row { display: flex; gap: 18px; padding: 20px; margin-bottom: 12px; }
.book-row .rail {
width: 104px; flex-shrink: 0; display: flex; flex-direction: column;
align-items: flex-start; gap: 8px;
border-right: 1px solid var(--hair); padding-right: 14px;
}
.book-body { min-width: 0; }
.book-cover {
flex-shrink: 0; border-radius: 4px; background: repeating-linear-gradient(135deg, var(--ph1), var(--ph1) 8px, var(--ph2) 8px, var(--ph2) 16px);
display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; color: var(--ph-label);
}
.book-cover--sm { width: 58px; height: 84px; }
.book-cover--md { width: 74px; height: 106px; }
.book-cover--lg { width: 200px; height: 290px; border-radius: 6px; box-shadow: 0 12px 30px var(--accent-soft); }
.book-body h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.book-row .year { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.book-desc { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.book-row .stores { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-top: 8px; }
/* book detail */
.book-detail { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; }
.book-detail .body { flex: 1; min-width: 280px; }
.buy-links { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { font-family: var(--font-head); font-size: 14px; font-weight: 600; border-radius: 999px; padding: 9px 18px; border: 1px solid var(--border); background: var(--surface); color: var(--accent); }
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ---------- Projects (two-section rail + body, mirrors article-row) ---------- */
.project-row { display: flex; gap: 18px; padding: 20px; margin-bottom: 12px; }
.project-row .rail {
width: 104px; flex-shrink: 0; display: flex; flex-direction: column;
align-items: flex-start; gap: 8px;
border-right: 1px solid var(--hair); padding-right: 14px;
}
.project-body { min-width: 0; }
.project-logo { width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 12px; font-weight: 800; color: var(--accent); }
.project-body h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.project-row .since { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.badge-sold { font-family: var(--font-head); font-size: 10px; font-weight: 700; color: var(--rust); background: var(--rust-soft); border-radius: 999px; padding: 3px 9px; text-transform: uppercase; }
.project-desc { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.project-row .tech { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0 0; padding: 0; list-style: none; }
.project-row .tech li { font-family: var(--font-mono); font-size: 9px; line-height: 1.4; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--faint); }
.project-more { border-top: 1px solid var(--hair); margin-top: 12px; padding-top: 12px; }
.project-more p { font-size: 15px; color: var(--muted); margin: 0 0 12px; }
.project-more p:last-child { margin-bottom: 0; }
/* ---------- Talks (two-section rail + body, mirrors article-row) ---------- */
.talk-row { display: flex; gap: 18px; padding: 20px; margin-bottom: 12px; }
.talk-row .rail {
width: 104px; flex-shrink: 0; display: flex; flex-direction: column; gap: 5px;
border-right: 1px solid var(--hair); padding-right: 14px;
}
.talk-date { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--accent); }
.talk-venues { font-family: var(--font-head); font-size: 11px; line-height: 1.4; color: var(--faint); }
.talk-venues a { color: var(--faint); }
.talk-venues a:hover { color: var(--accent); }
.talk-body { min-width: 0; }
.talk-body h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.talk-links { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-bottom: 10px; }
.talk-desc { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.talk-row .fr-note { font-family: var(--font-head); font-size: 12px; font-style: italic; color: var(--faint); display: inline-block; margin-top: 8px; }
.talk-photo { margin: 0 0 24px; }
.talk-photo figcaption { text-align: right; font-size: 12px; color: var(--faint); margin-top: 4px; }
/* ============================================================
Article body (post layout) — the reading experience.
Applied to the .post-body wrapper so content styles stay in the
layout, never in the render_with_liquid:false content files.
============================================================ */
.post-header { margin: 18px auto 40px; }
.post-header h1 { font-size: clamp(30px, 5vw, 38px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 10px; }
.post-header .posted { font-family: var(--font-head); font-size: 13px; color: var(--faint); }
.post-cover { border-radius: var(--radius); margin: 22px auto; width: 100%; }
/* "Originally published on …" note for imported / cross-posted articles */
.repost-note {
margin: 0 0 26px;
font-family: var(--font-head); font-size: 14px; line-height: 1.5; color: var(--muted);
background: var(--violet-soft); border: 1px solid var(--border);
border-radius: var(--radius); padding: 11px 15px;
}
.repost-note__label { font-weight: 700; color: var(--violet); }
.repost-note a { color: var(--violet); font-weight: 600; text-decoration: underline; text-decoration-color: var(--violet); text-underline-offset: 2px; }
.post-body { font-size: 18.5px; line-height: 1.75; }
.post-body > * { margin-inline: auto; }
.post-body h2 { font-size: 23px; font-weight: 700; margin: 34px auto 12px; }
.post-body h3 { font-size: 19px; font-weight: 700; margin: 26px auto 10px; }
.post-body p, .post-body ul, .post-body ol { margin: 0 auto 18px; }
.post-body ul, .post-body ol { padding-left: 22px; }
.post-body li { margin-bottom: 4px; }
.post-body a { text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 2px; }
.post-body img { border-radius: var(--radius); margin: 8px auto 22px; }
/* Inline SVG diagrams (e.g. Excalidraw exports) and