@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;500;700&family=Source+Serif+4:wght@400;600;700&display=swap');

/* Global */
:root {
    --bg: #fafaf7;
    --surface: #ffffff;
    --text: #222;
    --muted: #777;
    --border: #d8d8d0;
    --link: #0645ad;
    --link-hover: #002b6f;
    --font-body: "Atkinson Hyperlegible Next", sans-serif;
    --font-serif: "Source Serif 4", serif;
    --mono: ui-monospace,
             SFMono-Regular,
             Menlo,
             Monaco,
             Consolas,
             monospace;

    --width: 52rem;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
}

a {
    color: var(--link);
    text-decoration: underline;
}
a:hover {
    color: var(--link-hover);
}

main {
    max-width: var(--width);
    margin: 0 auto;
    padding: var(--space-6)
             var(--space-4);
}

h1,
h2,
h3 {
    font-family: var(--font-serif);
    margin-top: 0;
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
    background: white;
    border: 1px solid var(--border);
    padding:
        .4rem
        .8rem;
}

button:hover {
    background: #f0f0eb;
}

/* Header */
.site-header {

    border-bottom:
        1px solid var(--border);

}
.site-header nav {
    max-width: var(--width);
    margin: auto;
    padding:
        var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.logo {
    font-family: var(--mono);
    font-weight: bold;
    text-decoration: none;
    color: var(--text);
}

/* Sections */
.profile-section,
.timeline-section {
    margin-bottom: var(--space-7);
}

.section-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:
        1px dashed var(--border);
    margin-bottom:
        var(--space-4);
}
.section-header h2 {
    font-family: var(--mono);
    font-size: 1rem;
    text-transform: uppercase;
}

/* Posts */
#post-list {

    list-style:none;

    padding:0;

}
.post-item {
    background:var(--surface);
    border:
        1px solid var(--border);
    padding:
        var(--space-5);
    margin-bottom:
        var(--space-4);
}
.post-item h3 {
    margin-bottom:
        var(--space-2);
}
.post-meta {
    font-family:var(--mono);
    font-size:.85rem;
    color:var(--muted);
    margin-bottom:
        var(--space-3);
}
.post-media {
    display:block;
    width:100%;
    max-height:32rem;
    object-fit:contain;
    margin:
        var(--space-4)
        0;
}
.post-media img {
    display:block;
    width:100%;
    max-height:32rem;
    object-fit:contain;
}
.post-item iframe {
    aspect-ratio:16 / 9;
    border:0;
}

/* Feeds */
#feed-list {
    list-style:none;
    padding:0;
}
.feed-item {
    border-left:
        3px solid var(--border);
    padding-left:
        var(--space-4);
    margin-bottom:
        var(--space-4);
}