:root {
  color-scheme: light dark;
  --bg: #fbf8f4;
  --bg-elevated: #ffffff;
  --bg-sunken: #f3efe7;
  --text: #292420;
  --text-dim: #6f665b;
  --accent: #e8592f;
  --accent-ink: #ffffff;
  --accent-soft: #e8592f16;
  --good: #2f7d4f;
  --good-soft: #2f7d4f14;
  --border: #e8e0d3;
  --shadow: 0 1px 2px rgba(60, 40, 20, 0.04), 0 6px 20px rgba(60, 40, 20, 0.05);
  --display: "Baloo 2", "Segoe UI Rounded", var(--body);
  --body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1814;
    --bg-elevated: #262019;
    --bg-sunken: #17130f;
    --text: #f3ede3;
    --text-dim: #b8ac9a;
    --accent: #ff9166;
    --accent-ink: #211208;
    --accent-soft: #ff91661e;
    --good: #6bcf94;
    --good-soft: #6bcf9420;
    --border: #362d23;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}
* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

.wrap {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 24px;
}

a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { text-wrap: balance; margin: 0; font-family: var(--display); }
h2 { line-height: 1.1; }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent);
}

/* ---------- Site header ---------- */
.site-header {
  background: var(--bg-sunken);
  padding-block: 44px;
}
.site-title {
  display: block;
  width: fit-content;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4.8vw, 46px);
  line-height: 1.12;
  color: var(--accent);
  text-decoration: none;
}
/* The first section under the header uses the header's padding, so the space
   above the title, below it, and above the page's first text all match.
   text-box trimming drops the half-leading above the caps and below the
   baseline, so the gaps you see match the padding instead of running ~8px
   larger at the top. */
main > .block:first-child { padding-top: 44px; }
.site-title { text-box: trim-both cap alphabetic; }
main > .block:first-child > .wrap > :first-child { margin-top: 0; text-box: trim-start cap alphabetic; }
@media (max-width: 760px) {
  .site-header { padding-block: 30px; }
  main > .block:first-child { padding-top: 30px; }
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--body);
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
.btn-primary:hover { filter: brightness(1.05); }

/* ---------- Section shell ---------- */
section.block { padding-block: 56px; }
section.block + section.block { border-top: 1px solid var(--border); }
.block h2 {
  font-size: clamp(23px, 3vw, 29px);
  font-weight: 700;
}
.block .intro {
  color: var(--text-dim);
  max-width: 62ch;
  margin-top: 12px;
  font-size: 16px;
}
.block .intro p { margin: 0 0 12px; }
.block .intro p:last-child { margin-bottom: 0; }

/* ---------- Icons ---------- */
/* Tabler Icons v3.47.0 (MIT), https://tabler.io/icons. Each SVG is stored as a
   custom property and drawn as a mask, so the icon takes the text color. */
:root {
  --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M4 11h16'/%3E%3Cpath d='M11 15h1'/%3E%3Cpath d='M12 15v3'/%3E%3C/svg%3E");
  --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
  --icon-map-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0'/%3E%3C/svg%3E");
}
.icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  background-color: currentColor;
  mask: var(--icon) center / contain no-repeat;
}
.icon-calendar { --icon: var(--icon-calendar); }
.icon-clock { --icon: var(--icon-clock); }
.icon-map-pin { --icon: var(--icon-map-pin); }

/* ---------- Events ---------- */
.events-list {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.event {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}
.event.featured { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent), var(--shadow); }
@media (max-width: 680px) {
  .event { grid-template-columns: 1fr; text-align: left; gap: 12px; }
}
.event .when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  border-right: 1px solid var(--border);
  padding-right: 18px;
}
@media (max-width: 680px) { .event .when { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 12px; flex-direction: row; gap: 8px; align-items: baseline; } }
.event .when .mon { font-size: 12.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; }
.event .when .day { font-family: var(--display); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.event .body h3 { font-size: 17.5px; font-weight: 700; }
.event .body h3 a { color: inherit; text-decoration: none; }
.event .body h3 a:hover { color: var(--accent); }
.meta {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 15px;
  color: var(--text-dim);
}
.meta > span { display: inline-flex; align-items: center; gap: 6px; }
.event .desc { margin-top: 8px; font-size: 14.5px; color: var(--text-dim); max-width: 56ch; }
.status {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.status.open { color: var(--good); background: var(--good-soft); }
.status.soon { color: var(--accent); background: var(--accent-soft); }

.event .action { justify-self: end; }
@media (max-width: 680px) { .event .action { justify-self: start; } }