/* Ban appeal site. Plain, readable, mobile first; colours follow the Hephaestus Labs theme. System fonts only
   (nothing is loaded from elsewhere). No inline styles anywhere. */
:root {
  --bg: #15130F;
  --panel: #1D1A15;
  --panel-2: #25211B;
  --line: rgba(230, 224, 212, .22);
  --text: #E6E0D4;
  --muted: #B9B1A3;
  --gold: #D1AE5B;
  --gold-2: #E3C57E;
  --bad: #E58B7E;
  --ok: #86C9A0;
  --r: 6px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.0625rem; line-height: 1.55;
}
a { color: var(--gold-2); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; }
h1 { font-size: clamp(1.6rem, 6vw, 2.1rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; margin-top: 1rem; }
p { margin: 0 0 .8rem; }

.skip { position: absolute; left: 12px; top: -80px; padding: .6em 1em; background: var(--gold); color: #1A1408; font-weight: 700; border-radius: var(--r); }
.skip:focus { top: 12px; }

.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.top__name { margin: 0; font-weight: 700; font-size: 1.15rem; color: var(--gold-2); }
.top__who { margin: 0; color: var(--muted); }
.top__who strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.top__out { margin: 0 0 0 auto; }

.main { width: min(100%, 720px); margin: 0 auto; padding: 20px 16px 32px; }
.main:focus { outline: none; }
.foot { width: min(100%, 720px); margin: 0 auto; padding: 0 16px 32px; color: var(--muted); font-size: .95rem; }

.card { margin: 0 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow-wrap: anywhere; }
.card__label { margin: .6rem 0 .3rem; font-weight: 600; }
.quote { margin: 0 0 .8rem; padding: .6rem .9rem; border-left: 4px solid var(--gold); background: var(--panel-2); white-space: pre-wrap; }

.note { padding: .7rem .9rem; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--r); background: var(--panel-2); }
.note--bad { border-left-color: var(--bad); }
.note--ok { border-left-color: var(--ok); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55em 1.2em;
  border: 1px solid var(--gold); border-radius: var(--r); background: var(--gold); color: #1A1408;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--gold-2); border-color: var(--gold-2); color: #1A1408; }
.btn--ghost { background: transparent; color: var(--gold-2); }
.btn--ghost:hover { background: rgba(209, 174, 91, .14); color: var(--gold-2); }

.form { margin-top: .6rem; }
.field { margin: 0 0 1rem; }
.field label { display: block; margin-bottom: .25rem; font-weight: 700; }
.field__hint { margin: 0 0 .4rem; color: var(--muted); font-size: .95rem; }
.field__error { margin: 0 0 .4rem; color: var(--bad); font-weight: 600; }
.textarea {
  display: block; width: 100%; min-height: 44px; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg); color: var(--text); font: inherit; font-size: max(16px, 1rem); resize: vertical;
}
.textarea[aria-invalid="true"] { border-color: var(--bad); }