/* ==========================================================================
   Standard Output — a blog template built around reading.

   Body copy is a system serif, which is better for long text than any sans
   and costs nothing to load. Headings and metadata are sans and mono, so the
   furniture never competes with the prose.
   ========================================================================== */

:root {
    --paper:    #fcfcfd;
    --surface:  #f4f4f6;
    --ink:      #17171a;
    --muted:    #5c5c66;
    --rule:     #e3e3e8;
    --accent:   #5f3dc4;
    --code-bg:  #f4f4f7;

    --serif: ui-serif, Charter, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --sans:  ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* Measured, not guessed: 37rem lands at roughly 66 characters in this
       serif at 18px. Change the font or the size and re-measure. */
    --measure: 37rem;
    --wrap: 46rem;
    --gutter: clamp(1.25rem, 5vw, 2rem);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --paper:   #121317;
        --surface: #1a1b20;
        --ink:     #e8e8ec;
        --muted:   #9a9aa6;
        --rule:    #2a2b32;
        --accent:  #b197fc;
        --code-bg: #1a1b20;
    }
}

:root[data-theme='dark'] {
    --paper:   #121317;
    --surface: #1a1b20;
    --ink:     #e8e8ec;
    --muted:   #9a9aa6;
    --rule:    #2a2b32;
    --accent:  #b197fc;
    --code-bg: #1a1b20;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--accent); color: var(--paper); }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip-link {
    position: absolute;
    left: 50%; top: 0;
    translate: -50% -150%;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.8125rem;
    text-decoration: none;
}

.skip-link:focus-visible { translate: -50% 0; }

/* --- Masthead ------------------------------------------------------------- */

.masthead {
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}

.masthead__inner {
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.wordmark {
    font-family: var(--mono);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.wordmark span { color: var(--accent); }

.masthead nav {
    display: flex;
    align-items: center;
    gap: clamp(0.875rem, 3vw, 1.75rem);
}

.masthead nav a {
    font-size: 0.875rem;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

.masthead nav a:hover,
.masthead nav a[aria-current='page'] { color: var(--ink); }

.theme-toggle {
    display: grid;
    place-items: center;
    width: 2rem; height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.theme-toggle:hover { border-color: var(--rule); background: var(--surface); }

.theme-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.icon-moon { display: none; }
:root[data-theme='dark'] .icon-sun { display: none; }
:root[data-theme='dark'] .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .icon-sun { display: none; }
    :root:not([data-theme='light']) .icon-moon { display: block; }
}

/* --- Index ---------------------------------------------------------------- */

.intro { padding-block: clamp(3rem, 8vw, 5rem) clamp(2rem, 5vw, 3rem); }

.intro h1 {
    font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    max-width: 18ch;
}

.intro p {
    margin-top: 1rem;
    max-width: 46ch;
    color: var(--muted);
    font-size: 1.0625rem;
}

.posts { padding-bottom: clamp(3rem, 8vw, 5rem); }

.posts__label {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--rule);
}

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

.post-list li { border-bottom: 1px solid var(--rule); }

.entry {
    display: block;
    padding: 1.75rem 0.5rem;
    text-decoration: none;
    transition: background-color 0.25s var(--ease), padding-inline 0.25s var(--ease);
}

.entry:hover,
.entry:focus-visible {
    background: var(--surface);
    padding-inline: 1rem 0;
}

.entry__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted);
}

.entry__title {
    margin-top: 0.5rem;
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    transition: color 0.2s var(--ease);
}

.entry:hover .entry__title { color: var(--accent); }

.entry__excerpt {
    margin-top: 0.4rem;
    max-width: 60ch;
    font-family: var(--serif);
    color: var(--muted);
}

/* --- Article -------------------------------------------------------------- */

.article { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem); }

.back {
    display: inline-block;
    margin-bottom: 2.5rem;
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--muted);
    text-decoration: none;
}

.back:hover { color: var(--accent); }

.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.article__title {
    margin-top: 1rem;
    font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    max-width: 20ch;
    text-wrap: balance;
}

.article__standfirst {
    margin-top: 1.25rem;
    max-width: var(--measure);
    font-family: var(--serif);
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--muted);
}

/* The reading column. Everything that is prose sits at the measure; things
   that benefit from width (code, figures) are allowed to break out. */
.prose {
    margin-top: 3rem;
    font-family: var(--serif);
    font-size: 1.125rem;
    line-height: 1.75;
    text-wrap: pretty;
}

.prose > * { max-width: var(--measure); }

.prose > * + * { margin-top: 1.4em; }

.prose h2 {
    max-width: 26ch;
    margin-top: 2.75em;
    font-family: var(--sans);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.prose h3 {
    margin-top: 2em;
    font-family: var(--sans);
    font-size: 1.0625rem;
    font-weight: 600;
}

.prose a { color: var(--accent); text-underline-offset: 3px; }

.prose strong { font-weight: 600; }

.prose ul, .prose ol { padding-left: 1.5rem; }
.prose li + li { margin-top: 0.5em; }

.prose blockquote {
    padding-left: 1.5rem;
    border-left: 2px solid var(--accent);
    font-style: italic;
    color: var(--muted);
}

.prose hr {
    max-width: var(--measure);
    margin-block: 3rem;
    border: 0;
    border-top: 1px solid var(--rule);
}

/* Inline code sits in the text; blocks are allowed to run wider than the
   measure, because wrapping code to 66 characters helps nobody. */
.prose code {
    font-family: var(--mono);
    font-size: 0.875em;
    background: var(--code-bg);
    padding: 0.15em 0.35em;
    border-radius: 4px;
}

.prose pre {
    max-width: min(100%, 42rem);
    overflow-x: auto;
    padding: 1.125rem 1.25rem;
    background: var(--code-bg);
    border: 1px solid var(--rule);
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.6;
    tab-size: 2;
}

.prose pre code { background: none; padding: 0; font-size: inherit; }

.prose figure { max-width: min(100%, 42rem); }

.prose figcaption {
    margin-top: 0.6rem;
    font-family: var(--sans);
    font-size: 0.8125rem;
    color: var(--muted);
}

.prose .note {
    max-width: var(--measure);
    padding: 1rem 1.25rem;
    background: var(--surface);
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--muted);
}

.article__foot {
    max-width: var(--measure);
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    font-size: 0.9375rem;
    color: var(--muted);
}

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

/* --- About ---------------------------------------------------------------- */

.page-body {
    margin-top: 2rem;
    max-width: var(--measure);
    font-family: var(--serif);
    font-size: 1.125rem;
    line-height: 1.75;
}

.page-body > * + * { margin-top: 1.4em; }
.page-body a { color: var(--accent); }

/* --- Footer --------------------------------------------------------------- */

.footer {
    border-top: 1px solid var(--rule);
    padding-block: 2rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
}

.footer p { max-width: 48ch; }
.footer a { color: inherit; text-underline-offset: 2px; }
.footer a:hover { color: var(--accent); }

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}

@media print {
    .masthead, .back, .skip-link, .footer { display: none; }
    body { background: #fff; color: #000; }
    .prose { font-size: 11pt; }
}