:root {
  --ink: #2c2a28;
  --muted: #7a736c;
  --line: #e2dcd4;
  --bg: #faf7f2;
  --accent: #7d6a55;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 Georgia, "Times New Roman", serif;
}

header {
  text-align: center;
  padding: 4rem 1rem 2rem;
  border-bottom: 1px solid var(--line);
}

.kicker { text-transform: uppercase; letter-spacing: .3em; font-size: .7rem; color: var(--muted); margin: 0; }
h1 { font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 400; margin: .5rem 0; }
.date { color: var(--muted); margin: 0; }

main { max-width: 34rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
section + section { margin-top: 3rem; }
h2 { font-weight: 400; font-size: 1.4rem; border-bottom: 1px solid var(--line); padding-bottom: .4rem; }

.events { list-style: none; padding: 0; }
.events li { padding: .75rem 0; border-bottom: 1px dashed var(--line); }
.events .when { color: var(--accent); font-size: .9rem; }
.events .where { color: var(--muted); font-size: .9rem; }
.muted { color: var(--muted); }

form { display: flex; flex-direction: column; gap: 1rem; }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--muted); }
label.inline { flex-direction: row; align-items: center; gap: .5rem; color: var(--ink); }
input, textarea {
  font: inherit;
  padding: .6rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
}
input[type="radio"] { width: auto; padding: 0; }
fieldset { border: 1px solid var(--line); border-radius: 3px; display: flex; flex-direction: column; gap: .4rem; }
legend { font-size: .9rem; color: var(--muted); padding: 0 .4rem; }

button {
  font: inherit;
  padding: .7rem;
  border: 0;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }

#status { min-height: 1.5rem; margin: 0; font-size: .9rem; }
#status.ok { color: #2f6b46; }
#status.err { color: #a33; }