/* Same look as the app: deep sea and bone in the dark, weathered sail in the light, brass. */
@font-face {
    font-family: "Grenze Gotisch";
    src: url("/fonts/GrenzeGotisch-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "Barlow Semi Condensed";
    src: url("/fonts/BarlowSemiCondensed-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Barlow Semi Condensed";
    src: url("/fonts/BarlowSemiCondensed-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
}

:root {
    --sea: #e7ebe8;
    --deck: #f6f8f6;
    --ink: #142024;
    --ink2: #4c5c60;
    --brass: #8a651a;
    --rule: #c6cfca;
    color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
    :root {
        --sea: #0b1416;
        --deck: #121e21;
        --ink: #e9e4d4;
        --ink2: #93a3a3;
        --brass: #d3aa52;
        --rule: #2a3a3e;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--sea);
    color: var(--ink);
    font: 400 1.15rem/1.55 "Barlow Semi Condensed", system-ui, sans-serif;
}

main {
    max-width: 38rem;
    margin: 0 auto;
    padding: 3rem 1rem 4rem;
}

header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 2rem;
}
header img { width: 3.5rem; height: 3.5rem; border-radius: 22%; }
header a { color: inherit; text-decoration: none; }

h1 {
    font: 600 2.6rem/1 "Grenze Gotisch", serif;
    margin: 0;
}
h2 {
    font-weight: 600;
    font-size: 1.3rem;
    margin: 2rem 0 0.4rem;
}
p, ul { margin: 0 0 1rem; }
ul { padding-left: 1.2rem; }

a { color: var(--brass); }
code {
    font: inherit;
    font-weight: 600;
    background: var(--deck);
    border: 1px solid var(--rule);
    border-radius: 0.3rem;
    padding: 0 0.35rem;
}

.lead { font-size: 1.35rem; }
.muted { color: var(--ink2); }

nav {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}