@charset "UTF-8";
/* === DESIGN TOKENS === */
:root { /* Type */ --font-display: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif; --font-body: "Inter Tight", "Helvetica Neue", -apple-system, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace; /* Color — warm paper, deep ink, single accent */ --paper: #f6f3ec; --paper-warm: #efe9dc; --ink: #1a1814; --ink-soft: #4a463e; --ink-faded: #807a6e; --rule: #d9d3c4; --accent: #b8421d; --accent-soft: #d97447; --code-bg: #e8e3d4; /* Layout — fluid up to wide displays */ --measure: clamp(40rem, 56vw, 48rem); /* body prose: 640–768 px */ --measure-wide: clamp(60rem, 82vw, 80rem); /* page chrome: 960–1280 px */ --gutter: clamp(1.25rem, 4vw, 3rem); }

/* Dark tokens — applied either when user opted in (data-theme="dark"), or when no explicit choice exists and OS prefers dark. */
:root[data-theme="dark"], :root:not([data-theme="light"]) { /* placeholder so the selector compiles even without dark media; overridden below */ }

:root[data-theme="dark"] { --paper: #1c1a16; --paper-warm: #252220; --ink: #f0ebdd; --ink-soft: #c9c2b1; --ink-faded: #8a8474; --rule: #3a352d; --accent: #e8794a; --accent-soft: #f29568; --code-bg: #2a2722; }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #1c1a16; --paper-warm: #252220; --ink: #f0ebdd; --ink-soft: #c9c2b1; --ink-faded: #8a8474; --rule: #3a352d; --accent: #e8794a; --accent-soft: #f29568; --code-bg: #2a2722; } }
/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* === TYPE === */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; font-style: normal; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); margin: 0 0 0.6em; }

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

h2 { font-size: clamp(1.625rem, 3vw, 2.125rem); margin-top: 2.5em; }

h3 { font-size: 1.3125rem; margin-top: 2em; }

p { margin: 0 0 1.25em; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); transition: border-color 0.2s, color 0.2s; }

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

strong { font-weight: 600; }

em { font-style: italic; }

blockquote { margin: 2em 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--accent); font-family: var(--font-display); font-style: italic; font-size: 1.1875rem; color: var(--ink-soft); }

code { font-family: var(--font-mono); font-size: 0.9em; background: var(--code-bg); padding: 0.12em 0.4em; border-radius: 3px; }

pre { background: var(--code-bg); padding: 1.25rem 1.5rem; border-radius: 4px; overflow-x: auto; font-size: 0.875rem; line-height: 1.55; margin: 1.75em 0; }

pre code { background: none; padding: 0; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 3em auto; max-width: 4rem; }

ul, ol { padding-left: 1.5rem; margin: 0 0 1.25em; }

li { margin-bottom: 0.4em; }

/* === LAYOUT === */
.wrap { max-width: var(--measure-wide); margin: 0 auto; padding: 0 var(--gutter); }

.prose { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

.post-body.prose { padding: 0; margin: 0; }

/* === HEADER === */
.site-header { padding: 1.75rem 0 1.5rem; border-bottom: 1px solid var(--rule); }

.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

.site-brand { display: flex; align-items: center; gap: 0.875rem; min-width: 0; color: inherit; border: none; text-decoration: none; }

.site-brand:hover .site-title { color: var(--accent); }

.site-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--rule); background: var(--paper-warm); }

.site-identity { display: flex; flex-direction: column; min-width: 0; }

.site-title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; margin: 0; line-height: 1.1; }

.site-title a { color: var(--ink); border: none; }

.site-title-role { font-size: 0.75rem; color: var(--ink-faded); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.25rem; line-height: 1.3; }

.site-nav { display: flex; align-items: center; gap: 1.5rem; font-size: 0.9375rem; flex-wrap: wrap; }

.site-nav a { color: var(--ink-soft); border: none; text-transform: lowercase; letter-spacing: 0.02em; }

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

.site-nav a.icon-link { display: inline-flex; align-items: center; color: var(--ink-faded); }

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

.site-nav svg { display: block; }

/* === Theme toggle === */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin-left: 0.25rem; background: transparent; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }

.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.theme-toggle svg { width: 18px; height: 18px; display: block; }

/* Show sun in dark mode (offer light), moon in light mode (offer dark) */
.theme-toggle .icon-sun { display: none; }

.theme-toggle .icon-moon { display: block; }

:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } }
/* === HERO (home) === */
.hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--rule); }

.hero .wrap { text-align: center; display: flex; flex-direction: column; align-items: center; }

.hero-tagline { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 1.5rem; color: var(--ink); }

.hero-tagline em { color: var(--accent); font-style: italic; }

.hero-meta { font-size: 0.9375rem; color: var(--ink-faded); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.5rem; }

/* === TOPICS STRIP (hero) === */
.topics-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: -0.5rem; }

.topics-strip span { display: inline-block; font-size: 0.75rem; color: var(--ink-soft); border: 1px solid var(--rule); padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--paper-warm); text-transform: uppercase; letter-spacing: 0.07em; }

/* === ARCHIVE PAGE === */
.archive-header { padding: 3rem 0 2rem; border-bottom: 1px solid var(--rule); }

.archive-title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 400; margin: 0 0 1.5rem; }

.tag-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tag-btn { display: inline-block; font-family: var(--font-body); font-size: 0.75rem; color: var(--ink-soft); border: 1px solid var(--rule); padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--paper-warm); text-transform: uppercase; letter-spacing: 0.07em; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }

.tag-btn:hover { border-color: var(--accent); color: var(--accent); }

.tag-btn.active { background: var(--accent); border-color: var(--accent); color: var(--paper); }

.all-posts-link { padding: 1.75rem 0 0; font-size: 0.9375rem; }

.all-posts-link a { color: var(--ink-soft); border-bottom: none; }

.all-posts-link a:hover { color: var(--accent); }

/* === EXTERNAL WRITING === */
.external-writing { padding: 3rem 0; border-top: 1px solid var(--rule); }

.external-list { list-style: none; padding: 0; margin: 0; }

.external-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }

.external-list li:last-child { border-bottom: none; }

.external-list a { font-family: var(--font-display); font-size: 1.125rem; font-weight: 400; color: var(--ink); border: none; }

.external-list a:hover { color: var(--accent); }

.external-source { font-size: 0.75rem; color: var(--ink-faded); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; flex-shrink: 0; }

@media (max-width: 36rem) { .external-list li { flex-direction: column; gap: 0.25rem; } }
/* === POST LIST === */
.post-list { padding: 3rem 0; }

.post-list-header { font-family: var(--font-body); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faded); margin-bottom: 2rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); }

.post-item { display: grid; grid-template-columns: 8rem 1fr; gap: 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--rule); }

.post-item:last-child { border-bottom: none; }

.post-item time { font-size: 0.8125rem; color: var(--ink-faded); text-transform: uppercase; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

.post-item h2 { font-size: 1.5rem; margin: 0 0 0.5rem; font-weight: 500; }

.post-item h2 a { color: var(--ink); border: none; }

.post-item h2 a:hover { color: var(--accent); }

.post-item .excerpt { color: var(--ink-soft); font-size: 1rem; margin: 0; }

.post-item .tag { display: inline-block; font-size: 0.75rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.75rem; }

@media (max-width: 36rem) { .post-item { grid-template-columns: 1fr; gap: 0.5rem; } }
/* === POST (single) === */
.post-hero { padding: 4rem 0 2.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 3rem; }

.post-hero .wrap { text-align: center; }

.post-hero .kicker { font-size: 0.8125rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 1rem; }

.post-hero h1 { max-width: 24ch; margin: 0 auto 1.25rem; }

.post-hero .meta { font-size: 0.875rem; color: var(--ink-faded); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.post-hero .meta time::after { content: " · "; color: var(--rule); }

/* Optional cover image — rendered when page.image is set in frontmatter. Generated by the post-infographic skill at 1200x1500. */
.post-cover { display: block; width: 100%; height: auto; max-width: var(--measure-wide); margin: 0 auto 2.5rem; border: 1px solid var(--rule); border-radius: 4px; }

/* Two-column body: sticky meta rail + prose */
.post-layout { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); padding-bottom: 4rem; }

.post-rail { font-size: 0.875rem; color: var(--ink-faded); position: sticky; top: 2rem; align-self: start; }

.post-rail .rail-block { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }

.post-rail .rail-block:last-child { border-bottom: none; }

.post-rail .rail-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faded); margin-bottom: 0.4rem; }

.post-rail .rail-value { font-size: 0.9375rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.post-rail .rail-sub { font-size: 0.8125rem; color: var(--ink-faded); margin-top: 0.2rem; line-height: 1.4; }

.post-rail .rail-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.post-rail .rail-tags span { display: inline-block; font-size: 0.75rem; color: var(--ink-soft); border: 1px solid var(--rule); padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--paper-warm); }

.post-body { max-width: var(--measure); min-width: 0; }

.post-body p:first-of-type::first-letter { font-family: var(--font-display); font-size: 3.5rem; float: left; line-height: 0.9; padding: 0.35rem 0.5rem 0 0; color: var(--accent); font-weight: 500; }

.post-outro { text-align: center; color: var(--ink-faded); font-size: 0.9375rem; }

/* Stack rail above prose on narrow viewports */
@media (max-width: 56rem) { .post-layout { grid-template-columns: 1fr; gap: 2rem; }
  .post-rail { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1rem 2rem; }
  .post-rail .rail-block { margin: 0; padding: 0; border-bottom: none; }
  .post-body { max-width: none; } }
/* === FOOTER === */
.site-footer { border-top: 1px solid var(--rule); padding: 2.5rem 0 3rem; font-size: 0.875rem; color: var(--ink-faded); }

.site-footer .wrap { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; }

.site-footer a { color: var(--ink-soft); }

/* === ABOUT === */
.about-page { max-width: var(--measure-wide); margin: 0 auto; padding: 0 var(--gutter) 3rem; }

.about-page h1 { font-size: clamp(2.5rem, 6vw, 4rem); margin-top: 3rem; }

.about-page .lead { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.45; color: var(--ink-soft); margin-bottom: 2.5rem; }

.about-intro p { margin-bottom: 1.25em; }

.about-full { margin-top: 3rem; }

.about-full h2 { font-size: 1.625rem; }

.about-full ul { padding-left: 1.1rem; }

.about-full li { margin-bottom: 0.6em; }

/* === RESUME === */
.resume { max-width: var(--measure-wide); margin: 0 auto; padding: 2.5rem var(--gutter) 4rem; }

.resume-header { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; padding-bottom: 1.5rem; border-bottom: 2px solid var(--ink); margin-bottom: 2.5rem; }

.resume-header h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.5rem); margin: 0 0 0.25rem; letter-spacing: -0.02em; font-weight: 500; }

.resume-header .resume-role { font-size: 1rem; color: var(--accent); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }

.resume-contact { font-size: 0.875rem; color: var(--ink-soft); text-align: right; line-height: 1.7; font-variant-numeric: tabular-nums; }

.resume-contact a { color: var(--ink-soft); border-bottom-color: var(--rule); }

.resume-contact a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.resume-download { display: inline-block; margin-top: 0.5rem; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); border: 1px solid var(--accent); padding: 0.4rem 0.75rem; border-radius: 3px; border-bottom-width: 1px; }

.resume-download:hover { background: var(--accent); color: var(--paper); border-bottom-color: var(--accent); }

.resume section { margin-bottom: 2.5rem; }

.resume h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); font-weight: 500; letter-spacing: -0.01em; }

.resume .summary { max-width: 50rem; }

.resume .summary li { margin-bottom: 0.6em; }

.resume-experience { display: grid; gap: 2rem; }

.resume-role-card { display: grid; grid-template-columns: 12rem 1fr; gap: 2rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule); }

.resume-role-card:last-child { border-bottom: none; padding-bottom: 0; }

.resume-role-meta { font-size: 0.875rem; color: var(--ink-faded); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.resume-role-meta .resume-dates { display: block; margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }

.resume-role-card h3 { margin: 0 0 0.25rem; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 500; }

.resume-role-card .resume-employer { display: block; font-size: 0.9375rem; color: var(--accent); margin-bottom: 0.75rem; }

.resume-role-card ul { margin: 0; padding-left: 1.1rem; font-size: 0.9875rem; }

.resume-role-card li { margin-bottom: 0.4em; }

@media (max-width: 40rem) { .resume-role-card { grid-template-columns: 1fr; gap: 0.5rem; } }
.resume-skills { display: grid; gap: 1.5rem; }

.resume-skill-group h3 { margin: 0 0 0.5rem; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faded); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.1em; }

.resume-skill-group .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.resume-skill-group .chips span { display: inline-block; font-size: 0.8125rem; color: var(--ink-soft); border: 1px solid var(--rule); padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--paper-warm); }

.resume-recognition ul, .resume-education ul { padding-left: 1.1rem; }

.resume-recognition li { margin-bottom: 0.6em; }

.resume-education .resume-degree { font-family: var(--font-display); font-size: 1.0625rem; margin: 0; }

.resume-education .resume-school { color: var(--ink-faded); font-size: 0.9375rem; }

@media (max-width: 36rem) { .resume-header { grid-template-columns: 1fr; }
  .resume-contact { text-align: left; } }
/* === Print styles (resume PDF export from browser) === */
@media print { :root { --paper: #ffffff; --paper-warm: #f6f3ec; --ink: #000000; --ink-soft: #2a2620; --ink-faded: #5a554b; --rule: #cccccc; --accent: #8a3115; --code-bg: #f0ece2; }
  .site-header, .site-footer, .theme-toggle, .resume-download { display: none !important; }
  body { font-size: 10.5pt; line-height: 1.45; }
  .resume { padding-top: 0; padding-bottom: 0; max-width: none; }
  .resume section { margin-bottom: 1.25rem; page-break-inside: avoid; }
  .resume-role-card { page-break-inside: avoid; }
  a { color: inherit; border-bottom: none; } }
/* === Small refinements === */
::selection { background: var(--accent); color: var(--paper); }

img { max-width: 100%; height: auto; border-radius: 3px; }

.site-avatar { border-radius: 50%; }

.tag-row { margin-top: 1rem; }

.tag-row span { display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faded); border: 1px solid var(--rule); padding: 0.2rem 0.6rem; margin-right: 0.4rem; border-radius: 999px; }