/* last edit: 2026-10-14 (5) */

/* Built on new.css (https://github.com/xz/new.css), a classless css framework by Brendan Hersh. Thank you!
   Copyright (c) 2020 Brendan Hersh, MIT License (https://github.com/xz/new.css/blob/master/LICENSE).
   Pasted 2023-11-11, changed since, trimmed 2026-10-10 to just what the luz sites use. */

:root {
    --nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;

    --nc-tx-1: #000000;
    --nc-tx-2: #1A1A1A;
    --nc-bg-1: #FFFFFF;
    --nc-bg-2: #F6F8FA;
    --nc-bg-3: #E5E7EB;
    --nc-lk-1: #0070F3;
    --nc-lk-2: #0366D6;
    --nc-lk-tx: #FFFFFF;
    --nc-ac-1: #79FFE1;
    --nc-ac-tx: #0C4047;
    --nc-lk-home: blue;
}

@media (prefers-color-scheme: dark) {
    :root {
        --nc-tx-1: #ffffff;
        --nc-tx-2: #eeeeee;
        --nc-bg-1: #000000;
        --nc-bg-2: #111111;
        --nc-bg-3: #222222;
        --nc-lk-1: #3291FF;
        --nc-lk-2: #0070F3;
        --nc-ac-1: #7928CA;
        --nc-ac-tx: #FFFFFF;
        --nc-lk-home: #3291FF;
    }
}

* {
    margin: 0;
    padding: 0;
}

blockquote,
form,
img,
nav,
p,
ul,
video {
    margin-bottom: 1rem;
}

html {
    font-family: var(--nc-font-sans);
}

body {
    /* Center body in page */
    margin: 0 auto;
    max-width: 700px;
    padding: 2rem;
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
    background: var(--nc-bg-1);
    color: var(--nc-tx-2);
    font-size: 1.03rem;
    line-height: 1.5;
}

::selection {
    background: var(--nc-ac-1);
    color: var(--nc-ac-tx);
}

time {
    display: block;
    text-align: right;
    margin-bottom: 1.5rem;
    font-family: monospace;
    color: gray;
}

h1 {
    font-size: 1.2rem;
    line-height: 1;
    color: var(--nc-tx-1);
    padding-top: .875rem;
    padding-bottom: 2px;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--nc-bg-2);
}

a {
    color: var(--nc-lk-1);
}

a:hover {
    color: var(--nc-lk-2);
}

blockquote {
    padding: 1.5rem;
    background: var(--nc-bg-2);
    border-left: 5px solid var(--nc-bg-3);
}

blockquote *:last-child {
    margin-bottom: 0;
}

header {
    /* The side margins cancel out the body's, so the grey band stretches across the whole window. */
    margin: -2rem calc(50% - 50vw) 3.5rem;
    padding: 1.25rem calc(50vw - 50%) 1rem;
    background: var(--nc-bg-2);
    border-bottom: .5px solid var(--nc-bg-3);
    font-size: 1.5em;
}

header > *:first-child {
    margin-top: 0;
    padding-top: 0;
}

header > *:last-child {
    margin-bottom: 0;
}

nav {
    margin-top: .7rem;
    font-size: .9em;
}

nav a {
    margin-right: 20px;
}

nav a:last-child {
    margin-right: 0;
}

button {
    font-family: var(--nc-font-sans);
    font-size: 1rem;
    display: inline-block;
    padding: 6px 12px;
    text-align: center;
    white-space: nowrap;
    background: var(--nc-lk-1);
    color: var(--nc-lk-tx);
    border: 0;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
}

button:focus,
button:enabled:hover {
    background: var(--nc-lk-2);
}

input {
    font-family: var(--nc-font-sans);
    padding: 6px 12px;
    margin-bottom: .5rem;
    background: var(--nc-bg-2);
    color: var(--nc-tx-2);
    border: 1px solid var(--nc-bg-3);
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}

code {
    font-family: var(--nc-font-mono);
    font-size: 0.9em;
    padding: 3px 6px;
    background: var(--nc-bg-2);
    border: 1px solid var(--nc-bg-3);
    border-radius: 4px;
}

hr {
    border: 0;
    border-bottom: 1px solid var(--nc-bg-3);
    margin: 1rem auto;
}

ul {
    list-style-type: none;
}

li {
    margin-top: .4rem;
}

/* rows: date + title (index lists), bold label + text (privacy lists). plain bullets wrap as normal text */
li:has(> .dex-sage-elm),
li:has(> strong:first-child + span:last-child) {
    display: flex;
    align-items: flex-start;
}

li > strong:first-child {
    padding-right: 0.75em;
    white-space: nowrap;
}

img {
    max-width: 80%;
}

@media (max-width: 700px) {
    img {
        max-width: 100%;
    }
}

/* snap: an image linked to its own file. a click opens it full size in a new tab */
a.snap {
    text-decoration: none;
    cursor: zoom-in;
}


/* mike classes */

/* header with "Back to main site": on a wide screen the link sits out to the left of the column; narrower, it's
   a line above the chip */
.go-home {
    position: relative;
}

.go-home nav {
    position: absolute;
    top: 50%;
    left: calc(1rem + 4ch);
    transform: translateY(-50%);
    font-size: 0.9rem;
    z-index: 1;
}

.go-home nav a {
    color: var(--nc-lk-home);
    text-decoration: none;
}

.go-home nav a::before {
    content: "    ";
    white-space: pre;
}

@media screen and (max-width: 1200px) {
    .go-home nav {
        position: static;
    }

    .go-home nav a::before {
        content: "";
    }
}

/* site name in the header */
.sike-chip {
    color: var(--nc-tx-1);
    font-size: 1.5em;
    text-decoration: none;
}

/* index lists: date, then title */
.dex-sage-elm {
    flex-shrink: 0;
    margin-right: 1.5rem;
    font-family: monospace;
    color: gray;
}

.dex-sage-chip a {
    color: var(--nc-lk-2);
    text-decoration: none;
}

/* video (vab) */
.vab-sek video {
    width: 100%;
    height: auto;
}

.has-fire {
    color: red;
}

/* a line that sits close to the next one */
.tight {
    margin-bottom: .25rem;
}

/* logo, the home link: <a class="logo"> first in the header. on a wide screen it sits at the far left, 2rem in;
   narrower, a small one above the chip. black ink on clear, flipped to white in dark mode */
header:has(> .logo) {
    position: relative;
}

header > .logo {
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
    line-height: 0;
}

header > .logo img {
    display: block;
    height: 4rem;
    max-width: none;
    margin: 0;
}

/* <a class="logo small">: the logo at ~67%, sitting a little low */
header > .logo.small img {
    height: 2.34rem;
    position: relative;
    top: .3rem;
}

/* <a class="logo mid">: halfway between the two */
header > .logo.mid img {
    height: 3.16rem;
}

@media (prefers-color-scheme: dark) {
    header > .logo img {
        filter: invert(1);
    }

    /* <a class="logo color">: a colour logo (oakstead's leaf) stays as it is */
    header > .logo.color img {
        filter: none;
    }
}

/* narrower: the logo sits beside the title (left), not above it, so the header stays short */
@media screen and (max-width: 1100px) {
    /* two columns: the logo, then the title in a column of its own, so a long title wraps beside it */
    header:has(> .logo) {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: .75rem;
        align-items: center;
    }

    header > .logo {
        position: static;
        transform: none;
    }

    /* the nav takes the full width, under the logo and title */
    header:has(> .logo) > nav {
        grid-column: 1 / -1;
    }

    header > .logo img {
        height: 3.45rem;
    }

    header > .logo.small img {
        height: 2rem;
        top: 0;
    }

    header > .logo.mid img {
        height: 2.25rem;
    }
}

/* footer: under the page's last line, a photo on the left, room for text on its right */
footer .foot {
    display: flex;
    align-items: flex-start;
    gap: clamp(2rem, 14vw, 10rem);  /* 10rem on a wide screen, less on a phone */
}

footer .foot img {
    width: 14.4rem;
    max-width: 48vw;
    display: block;
}

/* a tall photo (oakstead's leaf): as tall as the wide one, not as wide */
footer .foot img.tall {
    width: auto;
    height: 8.27rem;
    max-width: none;
}