:root {
    /* fonts */
    --title-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    --body-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    --monospace-font-family: FixWebkitSizing, monospace;

    /* spacing */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: min( 2rem, 32px );
    --space-7: min( 3rem, 48px );
    --space-8: min( 4rem, 64px );

    /* typography */
    --font-size-0: 0.875rem;
    --font-size-1: 1rem;
    --font-size-2: 1.125rem;
    --font-size-h5: 1.125rem;
    --font-size-h4: 1.25rem;
    --font-size-h3: 1.5rem;
    --font-size-h2: 2rem;
    --font-size-h1: 2.5rem;

    --font-weight-light: 300;
    --font-weight-normal: 500;
    --font-weight-attention: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height: 1.5;
    --line-height-loose: 1.65;

    --white: rgb( 255, 255, 255 );
    --black: rgb( 0, 0, 0 );

    --blue-1: rgb(36, 81, 190);
    --blue-light-1: rgb(251, 252, 255);
    --blue-light-2: rgb(223, 234, 255);
    --blue-light-3: rgb(201, 220, 255);
    --blue-light-4: rgb(235, 240, 255);

    --gray-1: rgb(54, 61, 82);
    --gray-2: rgb(88, 96, 121);
    --gray-3: rgb(227, 234, 248);
    --gray-dark-1: rgb(18, 22, 34);

    --color-primary: var( --blue-1 );
    --color-text: var( --gray-1 );
    --color-text-muted: var( --gray-2 );
    --color-link: var( --blue-1 );
    --color-background: var( --blue-light-1 );
    --color-border: var( --gray-3 );
    --color-heading: var( --color-primary );

    --radius: .5rem;
    --radius-pill: 9999px;
}
/* @view-transition {
    navigation: auto;
} */
* {
    box-sizing: border-box;
}
/* containers */
body, header, footer {
    color: var( --color-text );
    background-color: var( --color-background );
}
header, main, footer {
    padding-inline: clamp( var( --space-3 ), 4vw, 64px );
}
body {
    font-family: var( --body-font-family );
    padding: 0;
    margin: 0;
    font-weight: var( --font-weight-normal );
}
a {
    color: var( --color-link );
}
a:hover {
    text-decoration: underline;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, h4, .h5 {
    color: var( --color-heading );
    font-family: var( --title-font-family );
    font-weight: var( --font-weight-light );
    text-wrap: balance;
    letter-spacing: -0.01em;
    font-weight: var( --font-weight-light );
    line-height: var( --line-height-tight );
}
h1 a, h2 a, h3 a, h4 a, h5 a, .h1 a, .h2 a, .h3 a, h4 a, .h5 a {
    font-weight: var( --font-weight-light );
    text-decoration: none;
}
h1, .h1 {
    font-size: var( --font-size-h1 );
}
h2, .h2 {
    font-size:  var( --font-size-h2 );
}
h3, .h3 {
    font-size:  var( --font-size-h3 );
}
h4, .h4 {
    font-size:  var( --font-size-h4 );
}
h5, .h5 {
    font-size:  var( --font-size-h5 );
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, h4, .h5, p, ul, ol, code, blockquote, pre, form {
    margin-block: 0;
}
* + h1, * + h2, * + h3, * + h4, * + h5, * + .h1, * + .h2, * + .h3, * + .h4, * + .h5, * + p, * + ul, * + ol, * + code, * + pre, * + blockquote, * + form, * + table, .margined,
* + :not(pre) > code[class*="language-"], * + pre[class*="language-"]  /* Prism code block rules */
{
    margin-block-start: .8em;
}
img {
    max-width: 100%;
    height: auto;
}
blockquote {
    border-left: 6px solid var( --blue-light-3 );
    padding-left: var( --space-3 );
}

table {
    border-collapse: collapse;
    margin-block: 1.5em;
}
table.center {
    margin-left: auto;
    margin-right: auto;
}
table thead th {
    color: var( --white );
    background: var( --blue-1 );
    padding: .5em 1em;
    text-align: left;
    border-right: 1px solid var( --blue-light-3 );
    font-weight: var( --font-weight-attention );
}
table thead th:first-child {
    border-top-left-radius: var(  --radius );
}
table thead th:last-child {
    border-top-right-radius: var(  --radius );
}

table tbody tr {
    border-bottom: 1px solid var( --gray-2 );
}
table tbody tr:last-of-type {
    border-bottom: 2px solid var( --gray-2 );
}
table tbody tr:nth-of-type(even) {
    background-color: var( --blue-light-4 );
}
table tbody tr:hover {
    background-color: var( --blue-light-3 );
}
table tbody td {
    padding: .5em 1em;
    border-right: 1px solid var( --blue-light-3 );
}
table tbody tr:nth-of-type(even) td {
    border-right-color: var( --white );
}
table tbody td:last-child {
    border-right: none;
}

main a {
    font-weight: var( --font-weight-attention );
}

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: minmax( 0, 1fr );
    gap: 0;
    line-height: var( --line-height );
    min-height: 100vh;
    min-height: 100dvh;
}
@media ( min-width: 1000px ) {
    body {
        grid-template-columns: auto minmax( 0, 1fr );
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "header main"
            "header footer";
    }
    header {
        grid-area: header;
    }
    main {
        grid-area: main;
    }
    footer {
        grid-area: footer;
    }
}

header {
    --color-background: var( --blue-light-3 );
    --color-text: var( --gray-2 );
    --color-heading: var( --blue-1 );
    padding-top: var( --space-3 );
    padding-bottom: var( --space-3 );
}
header a {
    text-decoration: none;
    color: inherit;
}
header a:hover {
    text-decoration: underline;
}
#site-title {
    color: var( --color-primary );
    line-height: 1;
}
#site-title:hover {
    text-decoration: none;
}
header p {
    font-size: var( --font-size-0 );
    margin-block-start: 0;
}
@media ( min-width: 1000px ) {
    header p {
        font-size: var( --font-size-0 );
        margin-block-start: .5em;
    }    
}
header nav {
    margin-top: .5em;
}
header nav ul {
    --margin-offset: var( --space-3 );
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
    gap: var( --space-2 );
    margin-inline-start: calc( -1 * var( --margin-offset ) );
}
header nav ul li a {
    min-height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
    padding-inline: var( --margin-offset );
    text-align: center;
}
header nav .active a {
    background-color: rgba( 255, 255, 255, .6 );
    color: var( --gray-dark-1 );
    border-radius: var( --radius );
    font-weight: var( --font-weight-attention );
    cursor: text;
}
header nav .active a:hover {
    text-decoration: none;
}
@media ( min-width: 1000px ) {
    header {
        padding-top: var( --space-8 );

    }
    header nav {
        margin-block-start: var( --space-7 );
    }
    header nav ul {
        flex-direction: column;
        gap: var( --space-4 );
    }
    header nav ul li a {
        justify-content: start;
    }
}

main {
    padding-block: var( --space-5 ) var( --space-7 );
}
main h1 {
    text-align: start;
    text-wrap: balance;
    /* Clips the ::after line at the right edge */
    overflow: hidden;
    padding-bottom: 0;
    margin-bottom: 1.5em;
}
/* Starts right after the last word and runs to the right edge along the
   text baseline. It is as wide as the heading, but the matching
   negative margin keeps it from taking up space on the line, so it never
   wraps on its own. */
main h1::after {
    content: "";
    display: inline-block;
    vertical-align: baseline;
    width: 100%;
    margin-left: .5em;
    margin-right: -100%;
    border-top: 3px dashed var( --blue-light-3 );
}
@media ( min-width: 1000px ) {
    main {
        padding: clamp( var( --space-4 ), 5vw, var( --space-8 ) );
    }
}

.article-tag {
    padding: calc( .5 * var( --space-1 ) ) var( --space-3 );
    border-radius: var( --radius-pill );
    background: var( --blue-light-2 );
    color: var( --blue-1 );
    font-weight: var( --font-weight-attention );
    font-size: .875em;
}
a.article-tag {
    text-decoration: none;
}
a.article-tag:hover {
    text-decoration: underline;
}

section.article-list {
    display: flex;
    flex-direction: column;
}
section.article-list article {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: var( --space-1 );
    padding: var( --space-6 ) 0;
    border-top: 1px solid var( --gray-3 );
}
section.article-list h1 + article {
    border-top-width: 0;
    padding-block-start: 0;
}
section.article-list > article:first-child {
    border-top-width: 0;
}
article div.details {
    display: flex; 
    align-items: center;
    gap: var( --space-3 );
    color: var( --gray-2 );
    font-size: var( --font-size-0 );
}
section.article-list article a.title {
    color: var( --blue-1 );
    text-wrap: balance;
    text-decoration: none;
    font-weight: var( --font-weight-normal );
    margin-block-start: .1em;
}
section.article-list article a:hover {
    text-decoration: underline;
}
section.article-list article p {
    font-size: var( --font-size-2 );
    line-height: var(  --line-height-loose );
    color: var( --gray-1 );
    max-width: 75ch;
    width: 100%;
    margin-block-start: .5em;
}

.post-list {
    list-style-type: none;
    padding: 0;
}
.post-list span.details {
    font-size: var( --font-size-0 );
}

#search-results > * {
    margin-block-start: 1em;
}

body.page-post .details + * {
    margin-block-start: 3em;
}

footer {
    --color-background: var( --blue-light-3 );
    --color-text: var( --gray-2 );
    --color-heading: var( --blue-1 );
    padding-top: var( --space-5 );
    padding-bottom: var( --space-5 );
    text-align: center;
}
@media ( min-width: 1000px ) {
    footer {
        --color-background: var( --color-background );
    }
}
footer a {
    font-weight: var( --font-weight-attention );
}