@font-face {
  font-family: "MedievalSharp";
  src: url("../fonts/medievalsharp.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #251d16;
  --muted-ink: #695b4c;
  --parchment: #e8dcc1;
  --parchment-light: #f8f3e8;
  --chrome: #302f2c;
  --chrome-deep: #1d1c1a;
  --chrome-soft: #55534e;
  --gold: #c6995d;
  --gold-light: #e0bb82;
  --red: #9f3e31;
  --red-deep: #732b23;
  --green: #2f8569;
  --danger: #b52c22;
  --line: #4a3a2b;
  --shadow: 0 3px 12px rgba(0, 0, 0, .32);
  --radius: .45rem;
  --display: "MedievalSharp", Georgia, serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font-family: var(--body); font-size: 1rem; line-height: 1.45; color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { touch-action: manipulation; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { color: var(--red); font-size: 1.35rem; }
h3 { color: var(--muted-ink); font-size: 1.05rem; }
p { margin: .6rem 0; }
small, .field-note { color: var(--muted-ink); font-size: .82rem; }
hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .15); width: 100%; }

input, select, textarea {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid #6b5945;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  padding: .55rem .65rem;
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid #246da2;
  outline-offset: 2px;
}
label { display: grid; gap: .3rem; color: var(--muted-ink); font-size: .875rem; }

.primary-button, .danger-button, .gold-button, .link-button {
  min-height: 2.75rem;
  border: 1px solid rgba(0, 0, 0, .35);
  border-radius: var(--radius);
  padding: .6rem 1rem;
  color: white;
  font-family: var(--display);
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
}
.primary-button { background: var(--red); }
.primary-button:hover { background: var(--red-deep); }
.danger-button { background: var(--danger); }
.gold-button { background: #b78345; }
.link-button { display: inline-grid; place-items: center; }
.quiet-link { display: inline-block; margin-top: 1rem; color: var(--red-deep); }
.danger-text { color: #ffaaa3 !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

.flash-stack { position: fixed; z-index: 1000; top: 1rem; left: 50%; width: min(92vw, 52rem); transform: translateX(-50%); display: grid; gap: .5rem; }
.flash { padding: .8rem 1rem; border-radius: var(--radius); background: var(--chrome-deep); color: white; border: 1px solid var(--gold); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.flash-error { border-color: #ff7268; }
.flash-success { border-color: #72d6a4; }
.flash-invitation { user-select: all; }

.auth-page {
  background:
    linear-gradient(rgba(22, 21, 19, .62), rgba(22, 21, 19, .78)),
    url("../img/med-bg.jpg") center / cover fixed;
  color: var(--parchment-light);
}
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth-card {
  width: min(100%, 28rem);
  padding: clamp(1.25rem, 5vw, 2.25rem);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: .8rem;
  background:
    linear-gradient(rgba(248, 243, 232, .88), rgba(232, 220, 193, .9)),
    url("../img/lys-bg.jpg") center / cover;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .5);
  text-align: center;
}
.auth-card-wide { width: min(100%, 34rem); }
.auth-logo { width: 5.5rem; height: 5.5rem; border-radius: 50%; border: 3px solid var(--gold); box-shadow: var(--shadow); }
.auth-card h1 { color: var(--red-deep); text-shadow: 0 1px white; }
.auth-kicker { color: var(--muted-ink); }
.form-stack { display: grid; gap: 1rem; text-align: left; margin-top: 1.25rem; }
.form-stack hr { border-top-color: rgba(63, 48, 35, .25); }
.credits-card { width: min(100%, 48rem); text-align: left; }
.credits-card h1 { text-align: center; }
.credits-card a { color: var(--red-deep); }

.admin-page { background: #272623 url("../img/med-bg.jpg") center top / cover fixed; color: var(--parchment-light); }
.simple-header { position: sticky; top: 0; z-index: 20; min-height: 4rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .6rem 1rem; background: rgba(29, 28, 26, .96); border-bottom: 2px solid var(--gold); }
.simple-header h1 { font-size: 2rem; }
.simple-header span { text-align: right; }
.admin-shell { width: min(100% - 1rem, 76rem); margin: 1rem auto 3rem; display: grid; gap: 1rem; }
.admin-panel { color: var(--ink); padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(248, 243, 232, .94); box-shadow: var(--shadow); }
.inline-form { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(8rem, 1fr) auto; gap: .75rem; align-items: end; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .65rem; border-bottom: 1px solid rgba(74, 58, 43, .2); text-align: left; }
.row-form { display: flex; gap: .5rem; align-items: center; }
.row-form select { width: auto; }
.row-form button { min-height: 2.4rem; }
.check-inline { display: inline-flex; grid-auto-flow: column; align-items: center; gap: .35rem; white-space: nowrap; }
.check-inline input { width: 1.2rem; min-height: 1.2rem; }
.audit-list { max-height: 20rem; overflow: auto; }
.audit-list p { border-bottom: 1px solid rgba(74, 58, 43, .16); padding-bottom: .4rem; }

@media (max-width: 680px) {
  .inline-form { grid-template-columns: 1fr; }
  .simple-header { grid-template-columns: auto 1fr; }
  .simple-header span { display: none; }
  .row-form { flex-wrap: wrap; }
}