@charset "utf-8";

/* Independent page theme; colours and the bundled typeface follow LivePython and LiveChatik. */
:root {
    color-scheme: dark;
    --clr-text: #c0c0c0;
    --clr-text-light: #e0e0e0;
    --clr-text-mid: #a0a0a0;
    --clr-back: #2b2b2b;
    --clr-back-dark: #222222;
    --clr-back-light: #3b3b3b;
    --clr-border: #4e4e4e;
    --clr-border-hover: #6e6e6e;
}

@font-face {
    font-family: "Nunito";
    src: url("../lib/fonts/Nunito-all.woff2") format("woff2");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

/* Typography and readable links. */
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--clr-back);
    color: var(--clr-text);
    font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}
h1, h2 { color: var(--clr-text-light); }
h1 { margin: 0 0 1rem; font-size: 1.8rem; }
h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
p { margin: 0.5rem 0; }
a, a:visited { color: inherit; text-underline-offset: 0.2em; text-decoration-style: dotted; }
a:hover { color: var(--clr-text-light); text-decoration-style: solid; }
a:focus-visible { outline: 2px solid var(--clr-border-hover); outline-offset: 3px; }
.plain { text-decoration: none; }
.bold { font-weight: bold; }
.large { font-size: large; }
.small { font-size: small; }
.muted { color: var(--clr-text-mid); }

/* Sticky full-width top bar and a centred reading column. */
header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1rem;
    background: var(--clr-back-dark);
    border-bottom: 1px solid var(--clr-border);
}
nav { display: flex; gap: 0.5rem; }
.bounded {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
    overflow-wrap: anywhere;
}

/* Bordered surfaces and compact link buttons. */
.panel {
    display: block;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--clr-back-dark);
    border: 1px solid var(--clr-border);
    border-radius: 0.3rem;
}
.button {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--clr-back-light);
    border: 1px solid var(--clr-border);
    border-radius: 0.2rem;
    text-decoration: none;
    white-space: nowrap;
}
a.panel:hover, .button:hover { border-color: var(--clr-border-hover); background: var(--clr-back-light); }
.button[aria-current="true"] { border-color: var(--clr-border-hover); color: var(--clr-text-light); }