/* Enough to read by. System fonts, no images, no script. Delete it the
 * moment you have something of your own. */

:root {
    --paper: #f4f2ec;
    --ink:   #1a1a1f;
    --hot:   #d0204f;
}

@media (prefers-color-scheme: dark) {
    :root { --paper: #121216; --ink: #ece9e2; }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 3rem 1.25rem 4rem;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.6 ui-sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

main { max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }

.masthead { padding-bottom: 1.25rem; border-bottom: 6px solid var(--ink); }

h1 { margin: 0; font-size: clamp(2.5rem, 10vw, 4.5rem); line-height: .95; font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; }

.lede { margin: .75rem 0 0; max-width: 32rem; font-size: 1.05rem; }

h2 { margin: 0 0 .75rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }

.next { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; }

pre { margin: .5rem 0 0; padding: .75rem .9rem; overflow-x: auto; border-left: 5px solid var(--ink); font: .82rem/1.5 ui-monospace, Menlo, monospace; }

code { font: .9em ui-monospace, Menlo, monospace; }

label { display: block; margin-bottom: .75rem; }

input { display: block; margin-top: .3rem; padding: .5rem .6rem; font: inherit; width: 100%; max-width: 20rem; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }

button { padding: .55rem 1rem; font: 700 1rem inherit; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }

.error { color: var(--hot); min-height: 1.5rem; margin: 0 0 .5rem; }

.foot { display: flex; flex-wrap: wrap; gap: .9rem; margin: 2rem auto 0; max-width: 44rem; padding-top: 1rem; border-top: 3px dashed var(--ink); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

.tape { padding: .2rem .5rem; background: var(--ink); color: var(--paper); font-weight: 900; }

a { color: inherit; text-decoration-color: var(--hot); text-decoration-thickness: 3px; }
