/* One stylesheet, no build step. Colours are declared once as tokens so the
   dark scheme at the bottom only has to restate the tokens. */

:root {
    --ink: #1d1b18;
    --ink-soft: #5e574d;
    --paper: #fbf8f3;
    --card: #ffffff;
    --line: #e3ddd2;
    --accent: #8a5a2b;
    --accent-soft: #f3e7d8;
    --good: #2f6b4f;
    --warn: #8a4b2b;
    --radius: 10px;
    --measure: 62ch;
}

* { box-sizing: border-box; }

/* label and fieldset carry a display of their own below, which would otherwise
   win against the user agent rule for [hidden] and leave a "hidden" block on
   screen. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.55 ui-serif, Georgia, "Times New Roman", serif;
}

main { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
p, li { max-width: var(--measure); }

h1, h2, h3 { line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; margin: 0 0 0.4rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 0.6rem; }
h3 { font-size: 1rem; margin: 0 0 0.3rem; }

a { color: var(--accent); }
.muted { color: var(--ink-soft); }
.small { font-size: 0.875rem; }

/* header ------------------------------------------------------------------ */

.bar {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: var(--card);
}
.brand { font-weight: 600; text-decoration: none; color: var(--ink); }
.bar nav { display: flex; gap: 1rem; align-items: baseline; }
.bar form { display: inline; }

/* The figure sits outside <main> so it is not held to the column's width or its
   side padding - which lets the image reach its own full 1024px, wider than the
   text column, before the cap below stops it upscaling into softness. The width
   and height attributes on the image reserve its space before it loads, so the
   page does not jump once it arrives. */
.hero { margin: 0 0 1.75rem; }
.figure { margin: 2.5rem 0 0; }

.hero img,
.figure img {
    margin: 0 auto;
    display: block;
    width: 100%;
    height: auto;
    max-width: 1024px;
}

/* blocks ------------------------------------------------------------------ */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin: 0 0 1rem;
}
.card.waiting,
.card.notice { border-left: 4px solid var(--accent); }

/* A honeypot field. Hidden from people, left in the markup for whatever fills
   every input it finds. */
.trap { display: none; }
.pair { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 40rem) { .pair { grid-template-columns: 1fr; } }

.tag {
    display: inline-block; font-size: 0.75rem; letter-spacing: 0.04em;
    text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
}

.flash { border-radius: var(--radius); padding: 0.7rem 0.9rem; max-width: none; }
.flash.good { background: #e7f1eb; color: var(--good); }
.flash.notice { background: var(--accent-soft); color: var(--warn); }
.flash.error { background: #f6e4e0; color: #8a2b2b; }

.entry { border-top: 1px solid var(--line); padding-top: 0.8rem; margin-top: 0.8rem; }
.entry:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.entry dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.entry dd { margin: 0.1rem 0 0.7rem; white-space: pre-wrap; }

/* forms ------------------------------------------------------------------- */

label { display: block; font-weight: 600; margin: 1rem 0 0.25rem; }
label .hint { display: block; font-weight: 400; font-size: 0.85rem; color: var(--ink-soft); }

input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
    width: 100%; max-width: var(--measure);
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: inherit;
    font: inherit;
}
textarea { min-height: 6rem; resize: vertical; }

button, .button {
    display: inline-block; margin-top: 1rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--accent); border-radius: 8px;
    background: var(--accent); color: #fff;
    font: inherit; text-decoration: none; cursor: pointer;
}
button.secondary, .button.secondary { background: transparent; color: var(--accent); }
button.link {
    margin: 0; padding: 0; border: 0; background: none;
    color: var(--accent); text-decoration: underline; cursor: pointer;
}
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

summary { cursor: pointer; }

.copy { width: 100%; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.8rem; }

/* dark -------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #ece7df;
        --ink-soft: #a49b8d;
        --paper: #17150f;
        --card: #201d16;
        --line: #363126;
        --accent: #d6a26a;
        --accent-soft: #33291d;
        --good: #8fc9a8;
        --warn: #e0a97e;
    }
    .flash.good { background: #1e2b23; }
    .flash.error { background: #33201d; color: #e6a79c; }
}