:root {
  color-scheme: light dark;
  --paper: #f2ede3;
  --ink: #281911;
  --ink-2: #5c554b;
  --accent: #7a2e1f;
  --rule: #c8c0b0;
  --ok: #4f7a3a;
  --slow: #b8841c;
  --down: #9b2f22;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1f2225;
    --ink: #e8e1d2;
    --ink-2: #a89f90;
    --accent: #d9915c;
    --rule: #3b4046;
    --ok: #7cb45e;
    --slow: #e0a93a;
    --down: #e06a55;
  }
}

@font-face {
  font-family: Literata;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/literata-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Literata;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/literata-var-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html {
  background: var(--paper) url(/img/paper.png);
  color: var(--ink);
  font: 400 17px/1.5 Literata, Georgia, serif;
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 38em;
  margin: 2.5em auto;
  padding: 0 16px;
}

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.2;
  margin: 1.6em 0 .5em;
}

h1 { font-weight: 700; font-size: 1.6em; }
h2 { font-size: 1.25em; }
h3 { font-size: 1em; }

a { color: var(--accent); }
a:visited { color: var(--ink-2); }
small, .muted { color: var(--ink-2); }
small { font-size: .9em; }

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em 1.5em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .5em;
  margin-bottom: 2em;
}

.masthead {
  margin: 0;
  font-size: 1.25em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.masthead a {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  color: inherit;
  text-decoration: none;
}

.masthead img { height: 64px; width: auto; }

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

footer {
  border-top: 1px solid var(--rule);
  margin-top: 2em;
  padding-top: .5em;
  color: var(--ink-2);
  font-size: .9em;
}

hr {
  border: 0;
  margin: 2em 0;
  text-align: center;
  color: var(--ink-2);
}

hr::before { content: "*\2003*\2003*"; }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

th, td {
  border-bottom: 1px solid var(--rule);
  padding: .3em .6em;
  text-align: left;
  vertical-align: top;
}

th { font-weight: 500; }
.num { text-align: right; }

form { margin: 1em 0; }
label { display: block; margin: 1em 0 .25em; }

input, select, textarea, button {
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--ink-2);
  border-radius: 0;
  padding: .3em .5em;
  max-width: 100%;
  box-sizing: border-box;
}

input[type="text"], input[type="email"], input[type="password"], select, textarea { width: 100%; }
input[type="checkbox"], input[type="radio"] { width: auto; margin-right: .4em; }
textarea { min-height: 8em; }
button { border-color: var(--ink); margin-top: 1em; }

fieldset {
  border: 1px solid var(--rule);
  padding: .5em 1em 1em;
  margin: 1em 0;
}

legend { padding: 0 .3em; }

.notice {
  border-left: 3px solid var(--accent);
  padding: .2em 0 .2em 1em;
  margin: 1.5em 0;
}

.up::before, .down::before { display: inline-block; width: 1.1em; }
.up::before { content: "\25CF"; }
.down::before { content: "\25CB"; color: var(--accent); }

ul.news { list-style: none; padding: 0; }
ul.news li { margin: .3em 0; }
ul.news time, article time { color: var(--ink-2); margin-right: .6em; }

img { max-width: 100%; height: auto; }
figure { margin: 1.5em 0; }
figcaption { color: var(--ink-2); font-size: .9em; }
.divider { display: block; width: 100%; margin: 3em 0 -1em; }

@media print {
  html { background: none; }
  header nav, footer { display: none; }
}

fieldset label { margin: .3em 0; }
td label { display: inline; margin: 0; }
td button { margin-top: 0; }

.strip { flex: 0 0 100%; font-size: .9em; margin: 0; padding: 0; border: 0; }
.strip a, .strip a:visited { color: inherit; text-decoration: none; }
/* The homepage's status strip: at the very top of the page, just above the logo (owner 2026-10-10). */
body:has(> header > .strip) { margin-top: .2em; }
header:has(> .strip) { row-gap: .1em; }
.ok::before, .slow::before { display: inline-block; width: 1.1em; content: "\25CF"; }
.ok::before { color: var(--ok); }
.slow::before { color: var(--slow); }
.down::before { content: "\25CF"; color: var(--down); }
.servers { list-style: none; padding: 0; }
.strip span { margin-left: .4em; }
/* A status dot sits against its own label (owner 2026-10-10). */
.strip span::before, .servers span::before, .muted > span::before { width: auto; margin-right: .2em; }
.aside { float: right; margin: 0 0 1em 1.5em; }
.aside img { width: 160px; height: auto; }
@media (max-width: 480px) { .aside { float: none; margin: 0 0 1em; text-align: center; } }
.chase { margin: 1.5em 0; text-align: center; }
.chase img { max-width: 100%; height: auto; }