/* sarahnovotny.com — native CSS, no JS. The look is the previous WordPress
   site (theme "thriving-artist", as Sarah had it set up): Space Mono for the
   masthead and headings, DM Sans for text, black on white, a 4px rule under
   the masthead, a 620px reading column and a 1000px wide column, and the
   Location / Contact footer on every page. Rebuilt as plain CSS, with the
   WordPress block scaffolding gone. See docs/DESIGN.md. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, blockquote, hr { margin: 0; }

/* Both faces are SIL OFL, latin subsets, self-hosted (CSP font-src 'self'). */
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url("/static/fonts/dm-sans-latin-100-1000.woff2") format("woff2");
}
@font-face {
    font-family: "Space Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/space-mono-latin-400.woff2") format("woff2");
}
@font-face {
    font-family: "Space Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/space-mono-latin-700.woff2") format("woff2");
}

:root {
    color-scheme: light dark;
    --bg:     light-dark(#ffffff, #121212);
    --fg:     light-dark(#000000, #f2f2f2);
    --muted:  light-dark(#292929, #bdbdbd);   /* the theme's "tertiary" */
    --rule:   light-dark(#000000, #f2f2f2);
    --hair:   light-dark(#000000, #3a3a3a);   /* separators between list rows */

    --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --content: 620px;          /* reading column (the theme's content-size) */
    --wide: 1000px;            /* lists, cover photos (wide-size) */
    --gap: min(30px, 5vw);     /* the theme's horizontal/vertical gap */
    --date-col: 7rem;          /* the "Apr 14, 2026" column on lists and posts */

    /* the theme's fluid sizes */
    --text:    clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.588), 1.125rem);
    --small:   0.875rem;
    --medium:  clamp(0.915rem, 0.915rem + ((1vw - 0.2rem) * 1.082), 1.375rem);
    --large:   clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 1.485), 1.75rem);
    --x-large: clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 1.765), 2rem);
    --huge:    min(max(3rem, 7vw), 5rem);
}
/* browser-theme.js pins a theme by setting data-theme on <html>; "auto"
   removes it and the OS setting applies via light-dark() above. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

body {
    font: var(--text)/1.6 var(--sans);
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Column helpers: everything sits in a .wrap (wide) or .narrow (content). */
.wrap   { width: min(var(--wide), 100% - 2 * var(--gap)); margin-inline: auto; }
.narrow { width: min(var(--content), 100% - 2 * var(--gap)); margin-inline: auto; }

/* --- masthead: title left, nav right, 4px rule, 30px inset --- */
.site-header { margin-inline: var(--gap); border-bottom: 4px solid var(--rule); padding-block: 25px; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; }
.brand { font: 400 var(--medium)/1.2 var(--mono); text-transform: uppercase; text-decoration: none; letter-spacing: 0.02em; }
.brand:hover { text-decoration: underline; }
.nav { display: flex; gap: clamp(0.75rem, 2.5vw, 1.5rem); font-size: var(--text); }
.nav a { text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
/* theme toggle: reads as one more nav item, in the masthead's mono */
.theme-toggle {
    font: 400 var(--small)/1.2 var(--mono); color: var(--muted);
    background: none; border: 1px solid var(--hair); border-radius: 0.2em;
    padding: 0.25em 0.6em; cursor: pointer; text-transform: lowercase;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--fg); }
.theme-toggle:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

main { padding-block: calc(2 * var(--gap)) calc(3 * var(--gap)); }

/* --- home: cover photo with the name over it, then the quoted bio --- */
.cover {
    position: relative; width: min(var(--content), 100% - 2 * var(--gap)); margin-inline: auto;
    min-height: 620px; display: grid; place-items: center; padding: 16px; overflow: hidden;
    color: #fff;
}
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.cover::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 40%); }  /* the theme's 40% dim */
.cover h1 {
    position: relative; z-index: 1; text-align: center; text-transform: uppercase;
    font: 700 clamp(42px, 2.629rem + ((1vw - 3.2px) * 5.578), 80px)/1 var(--sans);
    letter-spacing: -0.01em; max-width: 8ch;
}
.bio { margin-top: calc(3.5 * var(--gap)); }
blockquote {
    border-left: 1px solid var(--fg); padding-left: var(--gap);
    font-style: normal; font-size: var(--text);
}

/* --- footer: Location / Contact in two columns, as on the old site --- */
.site-footer { padding-block: calc(2 * var(--gap)) calc(3 * var(--gap)); }
.site-footer .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); text-align: center; }
.site-footer h3 { font: 700 var(--medium)/1.125 var(--mono); margin-bottom: 0.9em; }
.site-footer .cols p { font-size: var(--small); line-height: 1.5; }
.site-footer .cols p + p { margin-top: 0.3em; }
.site-footer .small { margin-top: calc(2.5 * var(--gap)); text-align: center; font-size: var(--small); color: var(--muted); }
.site-footer .small a { margin-inline: 0.4em; }
@media (max-width: 40rem) { .site-footer .cols { grid-template-columns: 1fr; gap: calc(2 * var(--gap)); } }

/* --- writing list: date column + mono title, hairline between rows. The
   list page uses the wide column (as the old site's query loop did); its
   intro stays at reading width. Specificity: these must beat `.prose h2`. --- */
.prose:has(> .post-list) { max-width: var(--wide); }
.prose:has(> .post-list) > p { max-width: var(--content); }
.post-list { list-style: none; padding: 0; margin-top: 0; }
.prose > .post-list:first-child { margin-top: calc(-1 * var(--gap)); }
.post-list li { display: flex; gap: var(--gap); align-items: center; padding: 1em 0 1.5em; margin-bottom: 2em; border-bottom: 1px solid var(--hair); }
.post-list time { flex: 0 0 var(--date-col); align-self: flex-start; padding-top: 0.75rem; font-size: var(--small); white-space: nowrap; }
.prose .post-list h2, .post-list h2 { font: 700 var(--x-large)/1.125 var(--mono); margin: 0; }
.post-list a { text-decoration: none; }
.post-list a:hover { text-decoration: underline; }
@media (max-width: 40rem) { .post-list li { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .post-list time { flex-basis: auto; padding-top: 0; } }

/* --- single post: the same date column + title, then the 620px column
   under the title (the old two-column template) --- */
.post-head { display: flex; gap: var(--gap); align-items: center; }
.post-head time { flex: 0 0 var(--date-col); align-self: flex-start; padding-top: 0.75rem; font-size: var(--small); white-space: nowrap; }
.post-head h1 { font: 700 var(--x-large)/1.125 var(--mono); }
.post-body { max-width: var(--content); margin-left: calc(var(--date-col) + var(--gap)); margin-top: calc(1.5 * var(--gap)); }
@media (max-width: 40rem) { .post-head { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .post-head time { flex-basis: auto; padding-top: 0; } .post-body { margin-left: 0; } }

/* --- pages: centred uppercase title, reading column --- */
.page-title { text-align: center; text-transform: uppercase; font: 800 var(--huge)/1 var(--sans); letter-spacing: -0.01em; margin-bottom: calc(2 * var(--gap)); }
.prose { max-width: var(--content); margin-inline: auto; }
.prose .wide-img { display: block; width: min(var(--wide), 100vw - 2 * var(--gap)); max-width: none; margin: 0 0 calc(2 * var(--gap)) calc(50% - min(var(--wide), 100vw - 2 * var(--gap)) / 2); }
.updated { color: var(--muted); font-size: var(--small); text-align: center; margin-bottom: calc(2 * var(--gap)); }

/* --- prose (pages, posts, comments) --- */
.prose, .post-body, .comments { overflow-wrap: break-word; }
.prose a, .post-body a, .comments a { overflow-wrap: anywhere; }
.prose > * + *, .post-body > * + *, .comments > * + *, blockquote > * + * { margin-top: 1.6em; }
.prose > .updated { margin-top: 0; }
.prose h2, .post-body h2 { font: 700 var(--x-large)/1.125 var(--mono); margin-top: 2em; }
.prose h3, .post-body h3 { font: 700 var(--large)/1.125 var(--mono); margin-top: 2em; }
.prose h4, .post-body h4 { font: 700 var(--medium)/1.125 var(--mono); }
.prose ul, .prose ol, .post-body ul, .post-body ol { padding-left: 1.25em; }
.prose li + li, .post-body li + li { margin-top: 0.4em; }
.prose img, .post-body img { display: block; max-width: 100%; height: auto; }
.post-body > p:has(> img:only-child) + p > em:only-child { display: block; margin-top: -1em; font-size: var(--small); } /* photo caption */
hr { border: 0; border-top: 1px solid var(--hair); margin-block: 2em; }
code { font-family: var(--mono); font-size: 0.9em; }
sup { line-height: 0; }
.footnote { font-size: var(--small); border-top: 1px solid var(--hair); padding-top: 1em; margin-top: 2.5em; }

/* archived comments: subordinate to the post */
.comments { margin-top: calc(3 * var(--gap)); border-top: 1px solid var(--hair); padding-top: 1em; font-size: var(--small); color: var(--muted); }
.comments h2 { font: 700 var(--medium)/1.125 var(--mono); color: var(--fg); margin-top: 1em; }
.comments > p + p { margin-top: 0.6em; }
.comments > p:has(> strong:first-child) { margin-top: 1.6em; }
.comments strong { color: var(--fg); }

/* older / newer */
.post-nav { max-width: var(--content); margin: calc(3 * var(--gap)) 0 0 calc(var(--date-col) + var(--gap)); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); border-top: 1px solid var(--hair); padding-top: 1.5em; }
.post-nav a { text-decoration: none; font: 700 var(--text)/1.3 var(--mono); }
.post-nav a:hover { text-decoration: underline; }
.post-nav a span { display: block; font: 400 var(--small)/1.4 var(--sans); color: var(--muted); margin-bottom: 0.25em; }
.post-nav .newer { text-align: right; }
@media (max-width: 40rem) { .post-nav { margin-left: 0; grid-template-columns: 1fr; } .post-nav .newer { text-align: left; } }

@media print { .site-header, .site-footer, .post-nav { display: none; } }