:root {
  --maxw: 760px;
  --ink:#222;
  --bg:#fafafa;
  --link:#a36e49;
  --header:#7c582a;
}

* {
  box-sizing: border-box;
}
body {
  margin:0;
  font-family: "Friz Quadrata Regular OS", system-ui, "Segoe UI", Roboto, sans-serif;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
}

a {
  color:var(--link);
}

/* ---- Side panel layout ---- */
.layout {
  display: flex;
  min-height: 100vh;
}
.side-panel {
  flex: 0 0 240px;
  color: #fff;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 0;
  height: 100vh;

  background: #a77434;
  background-image: linear-gradient(to bottom, transparent, #a77434), url(/static/assets/sidebar-cropped.png);
  background-size: cover;
}
.main {
  flex: 1 1 auto;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px;
  min-width: 0;
}

.site-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}
.site-title a {
  text-decoration: none;
  color: #7c582a;
}
.brand { font-weight:bold; font-size:1.1rem; color:#fff; }

.nav-section {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;
  color: #fff;
}
.nav-section :is(a, button) {
  text-decoration: none;
  color: #fff;
  padding: 6px 6px;
  margin: 0;
}
.nav-section > * {
  border-bottom: 1px solid #ffffff55;
}
.nav-section a:hover, .account-menu a:hover {
  background: rgba(255,255,255,.15);
}

.side-section { display:flex; flex-direction:column; margin-top: 10px; }
.side-heading { margin:0; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
                 opacity:.7; font-weight:600; }
.side-list {
  list-style: none;
  margin: 0 0 0 8px;
  padding: 0 0 8px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.side-list a {
  padding: 4px 6px;
  display: block;
}

.account-menu {
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap: 0;
}

/* inline sign-in form that lives in the sidebar when logged out */
.side-login { display:flex; flex-direction:column; gap:.5rem; }
.side-login .field { margin-bottom:0; }
.side-login label { font-size:.8rem; opacity:.85; }
.side-login input { padding:.3rem .4rem; font-size:.9rem; }
.side-login button { width:100%; background:#fff; color:#7c582a; border-color:#fff; }
.side-error { color:#fff; background:rgba(0,0,0,.28); border:1px solid rgba(0,0,0,.35);
             padding:.3rem .4rem; border-radius:4px; font-size:.8rem; margin:0; }
.forgot { font-size:.8rem; text-decoration:underline; opacity:.9; }

/* small screens collapse the panel to the top */
@media (max-width: 720px) {
  .layout { flex-direction: column; }
  .side-panel { flex: none; height: auto; position: static; }
  .nav-section { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
  .account-menu { flex-direction: row; flex-wrap: wrap; margin-top: .5rem; }
  .side-login { flex: 1 1 200px; }
  .thumb-grid { grid-template-columns:repeat(2, 1fr); }
}

.site-footer {
  margin-top: 16px;
  border-top: 1px solid #ddd;
  padding: 16px;
  text-align: center;
  color: #666;
  font-size: .9rem;
}

h1,h2,h3 {
  line-height:1.25;
  margin-top: 8px;
  margin-bottom: 4px;
}
h2 {
  margin-top: 8px;
}
.cta { margin-left: 6px; color: #a36e49; }
.cta-arrow { text-decoration: none; font-size: 24px; }

.oocname-header {
  margin: 0;
  display: inline-block;
}

.flashes { list-style:none; padding:0; }
.flash { padding:.5rem .75rem; margin-bottom:.75rem; border:1px solid #ccc;
         background:#fff; border-radius:4px; }
.flash-error { border-color:#e74c3c; background:#fdecea; }
.flash-success { border-color:#27ae60; background:#eafaf1; }
.flash-info { border-color:#3498db; background:#ebf5fb; }

.field { margin-bottom:1rem; }
.field label { display:block; font-weight:600; margin-bottom:.25rem; }
/* several short fields side by side (e.g. event start/end/time) */
.field-row { display:flex; gap:1rem; flex-wrap:wrap; }
.field-row .field { flex:1 1 8rem; margin-bottom:1rem; }
input, select, textarea { width:100%; padding:.4rem .5rem; font:inherit;
                          border:1px solid #bbb; border-radius:4px; background:#fff; }
textarea { resize:vertical; }
button, .btn { padding:.4rem .8rem; font:inherit; cursor:pointer;
               border:1px solid var(--header); background:var(--header);
               color:#fff; border-radius:4px; text-decoration:none; display:inline-block; }
button.link {
  border:none;
  background:none;
  color:#fff;
  padding:0;
  font:inherit;
  text-decoration:underline;
}

.right { margin-left: auto; }
.bold { font-weight: bold; }
.inline { display:inline; }
.inline input, .inline button { width:auto; }
.inline-block { display:inline-block; }

.muted { color:#777; font-size:.9rem; }
/* Jinja escapes HTML by default; pre-wrap keeps the author's line breaks. */
.prose { white-space:pre-wrap; }

.cards { display:grid; gap:1rem; }
.card { border:1px solid #ddd; padding:1rem; border-radius:6px; background:#fff; }
/* event cards: square image beside the text */
.event-card { display:flex; gap:1rem; align-items:flex-start; }
.event-card-img { flex:0 0 7rem; }
.event-card-img img { display:block; width:7rem; height:7rem; object-fit:cover;
                      border-radius:6px; border:1px solid #ddd; }
.event-card-body { flex:1; min-width:0; }
/* event view banner + edit-form preview */
.event-banner { display:block; max-width:100%; max-height:18rem; width:auto; height:auto;
                border:1px solid #ddd; border-radius:6px; margin:0 0 1rem; }
label.check { display:block; font-weight:400; margin:.4rem 0; }
label.check input { width:auto; }
/* event view: prominent metadata block (organizer/when/location/contact) */
.event-meta { border:1px solid var(--header); border-radius:6px; background:#f4ede0;
              padding:.5rem .9rem; margin:.8rem 0 1rem; }
.event-meta-row { display:flex; gap:.7rem; padding:.15rem 0; }
.event-meta-row .label { flex:0 0 6.5rem; font-weight:600; color:var(--header); }
/* events index: month calendar under the upcoming cards */
.calendar { width:100%; border-collapse:collapse; margin-top:.5rem; }
.calendar th { text-align:left; font-size:.75rem; text-transform:uppercase;
               letter-spacing:.04em; color:var(--header); padding:.2rem .3rem; }
.calendar td { vertical-align:top; width:14.28%; height:4.2rem;
               border:1px solid #e3dccb; padding:.25rem .3rem; }
.calendar td.pad { background:#f6f2ea; }
.calendar td.today { background:#fbf3dd; }
.calendar .daynum { display:block; font-size:.75rem; font-weight:600; color:var(--header); }
.calendar a.cell-ev { display:block; font-size:.72rem; line-height:1.3;
                      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
img.media { max-width:100%; height:auto; border:1px solid #ddd; border-radius:4px; }
/* 4x2 thumbnail grid for the character gallery (8 newest per category). */
.thumb-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem; }
.thumb {
  overflow:hidden;
  border:1px solid #ddd;
  border-radius:4px;
  background:#fff;
  display:block;
}
.thumb img { aspect-ratio: 1/1; width:100%; object-fit:cover; display:block; }

ul {margin: 4px;}
ul.tight { padding-left:1.1rem; }
.actions { margin-top:1rem; display:flex; gap:.5rem; flex-wrap:wrap; }
hr { border:none; border-top:1px solid #ddd; margin:1.5rem 0; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }