:root {
  --ink: #e8e2d4;
  --ink-dim: #9a9382;
  --bg: #10140f;
  --accent: #6fbf73;
  --warn: #d8a657;
  --rule: #2f3a2c;
  --font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
}

body {
  padding: 2rem 1.25rem 4rem;
  font-size: 0.85rem;
}

main { width: min(34rem, 100%); margin: 0 auto; }

.languages {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.languages button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
}

.languages button:hover { border-color: var(--ink-dim); }
.languages button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.languages button[aria-pressed="false"] { opacity: 0.45; }
.languages button[aria-pressed="true"] { border-color: var(--accent); }

.languages svg { display: block; }

h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: 0.18em;
  text-shadow: 0 3px 0 #000;
}

.under {
  margin: 0 0 2.5rem;
  color: var(--ink-dim);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

h2 {
  margin: 2rem 0 0.4rem;
  font-size: 0.72rem;
  font-weight: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

h3 {
  margin: 1.25rem 0 0.3rem;
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.04em;
}

p { margin: 0 0 0.6rem; }

ul, ol { margin: 0 0 0.8rem; padding-left: 1.4rem; }
li { margin: 0 0 0.3rem; }
li > ul, li > ol { margin-top: 0.3rem; }

address { font-style: normal; white-space: pre-line; margin: 0 0 0.6rem; }

a { color: var(--ink); }
a:hover, a:focus-visible { color: var(--accent); }

.action {
  margin: 1.25rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
}

.back {
  display: inline-block;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  width: 100%;
  color: var(--ink-dim);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.back:hover, .back:focus-visible { color: var(--accent); }

.courtesy {
  margin: 2.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-dim);
  font-size: 0.72rem;
}

.delete button {
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border: 0;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}

.delete button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.delete .secondary {
  color: var(--ink);
  background: #232b21;
  border: 1px solid #38452f;
}
.delete .secondary:hover { background: #2c3729; }

.delete .danger {
  color: var(--bg);
  background: var(--warn);
  border-bottom: 4px solid #7a5a2e;
}
.delete .danger:hover:not(:disabled) { filter: brightness(1.1); }
.delete .danger:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.delete .danger:disabled { background: #444a42; color: var(--ink-dim); cursor: default; border-bottom-color: #2a2e28; }

.delete { margin: 1rem 0 1.5rem; }
.delete .buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.9rem 0 0; }
.delete .who { color: var(--accent); }