/*
 * The notices. Plain pages, deliberately: they are read once, by somebody
 * deciding whether to trust the place, and anything clever in the way of that
 * is working against them.
 */

/*
 * Dark, whatever the device is set to. These pages used to follow the reader
 * and turn pale in the daytime, which made them the one part of Pinhold that
 * did: the board, the gate and every dialog are dark and always were. A
 * notice that does not look like the site it belongs to is a notice somebody
 * has to stop and place.
 */
:root {
  color-scheme: dark;
  --ink: #ece7dc;
  --muted: #a49c8c;
  --bg: #17150f;
  --panel: #201d16;
  --edge: #3a352a;
  --accent: #d9a441;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 32px 20px 96px;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.62 ui-serif, Georgia, 'Times New Roman', serif;
}

main {
  max-width: 34rem;
  margin: 0 auto;
}

/* The way back, always in the same place on every one of these. */
.crumb {
  margin: 0 0 28px;
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
}

h1 {
  margin: 0 0 6px;
  font-size: 30px;
  line-height: 1.15;
}

h2 {
  margin: 34px 0 8px;
  font-size: 20px;
  line-height: 1.25;
}

.dated {
  margin: 0 0 30px;
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
}

p,
li {
  margin: 0 0 14px;
}

ul,
ol {
  margin: 0 0 14px;
  padding-left: 1.4em;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.16em;
}

strong {
  font-weight: 700;
}

/* Something the owner of the site still has to fill in. */
.todo {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--accent);
  color: #17150f;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.82em;
  font-weight: 700;
}

/* A point that matters more than the paragraph around it. */
.box {
  margin: 20px 0;
  padding: 14px 16px;
  border: 1px solid var(--edge);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--panel);
}

.box > :last-child {
  margin-bottom: 0;
}

.address {
  margin: 12px 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: var(--panel);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* A licence, folded away: it has to be here, but nobody reads it twice. */
details {
  margin: 12px 0 20px;
}

summary {
  color: var(--accent);
  cursor: pointer;
}

details .licence {
  margin: 10px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: var(--panel);
  color: var(--muted);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
}

details .licence p {
  margin: 0 0 10px;
}

details .licence p:last-child {
  margin-bottom: 0;
}

nav.pages {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav.pages li {
  margin: 0 0 18px;
}

nav.pages a {
  font-size: 19px;
}

nav.pages span {
  display: block;
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
}

footer {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--edge);
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
}

/* The line that says whose this is. Quieter than the links above it. */
.copyright {
  margin: 10px 0 0;
  opacity: 0.75;
}