:root {
  /* Color Palette */
  --bg: #edf2f4;
  --panel-bg: #edf2f4;
  --border: #e3e8eb;
  --ink: #1e2c32;
  --ink-muted: color-mix(in srgb, var(--ink) 50%, var(--bg));
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
}

h1, h2, .nav-text {
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--ink);
}

h1 { font-size: 32px; }
h2 { font-size: 16px; }

a { color: inherit; }
a:visited { color: var(--ink-muted); }

blockquote {
  margin: 10px;
}

blockquote cite {
  display: block;
  text-align: right;
  color: var(--ink-muted);
}

/* --- Faded underline */
.underline, .nav-text {
  background-image: linear-gradient(to right, var(--ink), var(--ink-muted), transparent);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 0.1em;
}

/* --- Helper styles */
.stack {
  display: grid;
  gap: 10px;
}

.ink-muted { color: var(--ink-muted) }

.flex-center {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* --- Page styles */
.page {
  margin: 0 auto;
  width: 95vw;
}

.page > :last-child { margin-bottom: var(--gap); }

.panel {
  padding: 10px;
  border: 5px solid var(--border);
  outline-offset: -3px;
  background: var(--panel-bg);
}

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

/* --- Navigation bar styles */
.nav { margin-top: 5px;}

.nav-link {
  color: inherit;
  text-decoration: none;

  cursor: pointer;
}

.nav-text {
  background-position: 0 100%;
  background-size: 0 0.1em;
  transition: background-size 200ms ease;
}

.nav-link.active .nav-text { background-size: 100% 0.1em; }
.nav-link.leaving .nav-text { background-size: 0 0.1em; }

/* --- Button styles */
.button {
  width: fit-content;

  padding: 5px;

  border: 1px solid var(--border);

  font: inherit;
  color: inherit;
  line-height: 1;
  text-decoration: none;

  background: transparent;

  cursor: pointer;
  translate: 0 0;
  transition: translate 100ms ease, box-shadow 100ms ease;
}

.button {
  box-shadow:
    inset 0 0 2px rgba(0, 0, 0, 0.25),
    1px 1px 0 rgba(0, 0, 0, 0.5);
}

.button:active { 
  translate: 1px 1px;
  box-shadow:
    inset 0 0 2px rgba(0, 0, 0, 0.125),
    0 0 0 rgba(0, 0, 0, 0.5);
 }

a { color: inherit; }
a:visited { color: var(--ink-muted); }

a.button { display: inline-block; }
a.button:visited { color: var(--ink); }

/* --- Form styles */
.form input, .form select, .form textarea {
  width: 100%;
  padding: 5px;
  border: 2px solid var(--border);
  font: inherit;
  color: inherit;
  background: #fff;
  outline: none;
}

.form select {
  border-radius: 0;
  appearance: none;
}

.form select:has(option:disabled:checked) {
  color: var(--ink-muted);
}

.form textarea {
  min-height: 100px;
  resize: none;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.form-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
}

.form-row input, .form-row select, .form-row textarea {
  width: auto;
}

.form .input-num { width: 10ch; }

/* --- Misc */
.hp {
  position: absolute;
  left: -9999px;
}