:root {
  --warn-text: #ff9c9c;
  /* Georgia State blue. Declared exactly once here and referenced by token
   everywhere else — a test asserts this raw hex appears only one time. */
  --mtm-blue:      #0039a6;
  --mtm-blue-fg:   #ffffff;
  --mtm-blue-dim:  #bfdbfe;   /* Tailwind blue-200, for the version stamp */
  --on-blue-hover: rgba(255, 255, 255, 0.1);
  --on-blue-live:  rgba(255, 255, 255, 0.2);

  /* Dark is the only palette. There is no toggle and no system-preference
     switch — one set of values, defined here. */
  --paper:        #10141b;
  --paper-sunk:   #171d27;
  --ink:          #e7ecf3;
  --ink-soft:     #a2acbb;
  --ink-faint:    #7d8998;
  --rule:         #28313f;
  --accent:       #7ea8f0;
  --focus:        #7ea8f0;
  --warn:         #e08c5f;
  --ok:           #6fbf8f;
  --topbar-h:     5rem;
  --shell:        80rem;      /* 80rem */
  --max:          46rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  /* Page copy is published by a human and can contain a long unbroken URL.
     Without this, one such string pushes the whole page sideways on a phone —
     the body must never be what scrolls horizontally. */
  overflow-wrap: anywhere;
}

a { color: inherit; }

/* ---------- brand bar ---------- */

.topbar {
  background: var(--mtm-blue);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.topbar-inner {
  flex-wrap: wrap;
  row-gap: 0.5rem;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 1rem;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 640px) { .topbar-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .topbar-inner { padding: 0 2rem; } }

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

/* A round mark. Do not square it. */
.brand-mark {
  /* The seal carries the identity on its own now — the "MTM" wordmark beside
     it was saying a second time what the mark already says. */
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 9999px;
  display: block;
}

.brand-name {
  color: var(--mtm-blue-fg);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.025em;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.brand-ver {
  color: var(--mtm-blue-dim);
  font-size: 0.625rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  align-self: flex-end;
  margin-bottom: 0.15rem;
}

.topbar-actions { display: flex; align-items: center; gap: 0.25rem; }

.topbar-nav { display: flex; gap: 0.25rem; }

.theme-toggle {
  background: none;
  border: 1px solid transparent;
  color: var(--mtm-blue-dim);
  font: inherit;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  min-height: 2.25rem;
  border-radius: 0.375rem;
  cursor: pointer;
}

.theme-toggle:hover { background: var(--on-blue-hover); color: var(--mtm-blue-fg); }

.topbar-nav a {
  color: var(--mtm-blue-dim);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.375rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.topbar-nav a:hover { background: var(--on-blue-hover); color: var(--mtm-blue-fg); }
.topbar-nav a.is-active { background: var(--on-blue-live); color: var(--mtm-blue-fg); }

/* ---------- sheet ---------- */

.sheet {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

h1 {
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  font-weight: 600;
}

.lede {
  color: var(--ink-soft);
  margin: 0;
  max-width: 34rem;
}

.lede-block { margin-bottom: 3rem; }

/* ---------- listing ---------- */

.listing { list-style: none; margin: 0; padding: 0; }

.listing-item + .listing-item { border-top: 1px solid var(--rule); }

.listing-item a {
  display: grid;
  gap: 0.3rem;
  padding: 1.4rem 0;
  text-decoration: none;
}

.listing-item a:hover .listing-title { color: var(--accent); }

.listing-kind {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.listing-title { font-size: 1.3rem; font-weight: 600; }

.listing-date, .listing-summary { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- one page ---------- */

.page-kind {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.75rem;
}

.page-title { margin-bottom: 0.5rem; }

.page-date {
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 1.5rem;
}

.page-time {
  color: var(--ink-soft);
  margin: -1rem 0 1rem;
}

.page-series {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: -1rem 0 1.5rem;
}

.page-summary { font-size: 1.15rem; color: var(--ink-soft); }

.page-body { margin-top: 2rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- empty / not found ---------- */

.empty {
  padding: 3.5rem 0;
  border-top: 1px solid var(--rule);
}

.empty-head { font-size: 1.2rem; margin: 0 0 0.5rem; }

.empty-sub { color: var(--ink-soft); margin: 0; max-width: 30rem; }

/* ---------- colophon ---------- */

.colophon {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  /* flex-end, not space-between: the program name that used to sit on the
     left was removed at Ben's request, and space-between would shove the
     remaining group hard against the left margin. */
  justify-content: flex-end;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.colophon-end {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
}

/* Faculty go through here; the public never needs it, so it reads as
   colophon text rather than a call to action. */
.colophon-link {
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.colophon-link:hover,
.colophon-link:focus-visible {
  color: var(--ink-soft);
  border-bottom-color: var(--rule);
}

/* ---------- admin ---------- */

.admin { max-width: 52rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

.admin .colophon { max-width: none; padding-left: 0; padding-right: 0; }

.admin h1 { font-size: 1.6rem; }

.admin-note {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  padding: 1rem 1.15rem;
  margin: 0 0 2rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}


.admin-row {
  border-top: 1px solid var(--rule);
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.admin-row > div { min-width: 0; flex: 1; }

.badge {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  white-space: nowrap;
}

.badge-live { border-color: var(--ok); color: var(--ok); }

.blocker { color: var(--warn); font-size: 0.85rem; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- one palette ----------
   Colours live in :root above and nowhere else. */


/* ---------- meet-up sign-up form ----------
   A public write surface, so it is built to be filled in on a phone at a table
   with a queue behind you: one column, real hit targets, no JavaScript. */

.form-head { margin-top: 3rem; }

.signup .field { margin: 0 0 1.75rem; }

.signup label,
.signup legend {
  display: block;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  padding: 0;
}

.signup fieldset { border: 0; margin: 0; padding: 0; }

.req, .opt {
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.req { color: var(--warn); }
.opt { color: var(--ink-faint); }

.hint {
  display: block;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0 0 0.6rem;
}

.signup input[type="text"],
.signup input[type="email"],
.signup input[type="tel"],
.signup textarea,
.signup select {
  width: 100%;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0.25rem;
  padding: 0.6rem 0.7rem;
  /* 2.75rem clears the 44px tap target; anything less is a mis-tap on a phone. */
  min-height: 2.75rem;
  margin-bottom: 1rem;
}

.signup textarea { resize: vertical; }

.choices { display: grid; gap: 0.5rem; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
  font-size: 0.98rem;
  border: 1px solid var(--rule);
  border-radius: 0.25rem;
  padding: 0.65rem 0.8rem;
  margin: 0;
  cursor: pointer;
}

.choice:hover { border-color: var(--accent); }
.choice input { margin: 0.25rem 0 0; accent-color: var(--accent); }

/* Set apart because most of the form does not apply to you. Read the heading,
   skip the whole block. */
.performer {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  padding: 1.25rem 1.25rem 0.5rem;
}

.performer-head {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.submit {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  background: var(--accent);
  color: var(--mtm-blue-fg);
  border: 0;
  border-radius: 0.25rem;
  padding: 0.8rem 1.6rem;
  min-height: 3rem;
  cursor: pointer;
}

.submit:hover { filter: brightness(1.12); }

.submit-note {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0.9rem 0 0;
}

.form-problems {
  border: 1px solid var(--warn);
  padding: 1rem 1.15rem;
  margin: 0 0 2rem;
  color: var(--warn-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.95rem;
}

.form-problems-head { margin: 0 0 0.5rem; font-weight: 600; }
.form-problems ul { margin: 0; padding-left: 1.2rem; }

.signin-button { margin: 1.5rem 0 0.75rem; }
.signin-msg { display: none; margin: 0.75rem 0 0; font-size: 0.95rem; }
.signin-msg.show { display: block; }
.signin-msg.err { color: var(--warn-text); }

.meetup-admin-head { margin-top: 3.5rem; }
.meetup-admin { max-width: 34rem; }

/* A consent checkbox reads as a sentence, not as a form control: the label
   wraps the box so the whole line is a hit target on a phone. */
.field-check label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}

.field-check input[type="checkbox"] {
  width: auto;
  margin: 0.2rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--mtm-blue);
}

/* One submission, sized to be read on a phone between classes. */
.music-row {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.9rem 1rem;
  margin: 0 0 0.6rem;
  background: var(--paper-sunk);
}

.music-head { margin: 0 0 0.25rem; font-size: 1.05rem; }
.music-meta { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--ink-soft); }
.music-playing { border-left: 3px solid var(--mtm-blue); }
.music-not_this_time { opacity: 0.55; }

/* The event this form belongs to. A heading block, not a poster: the flyer's
   job is done once the student has clicked. Uses the brand token — never a
   colour sampled off an image. */
.event-head {
  border-left: 3px solid var(--mtm-blue);
  padding: 0 0 0 0.9rem;
  margin: 0 0 1.75rem;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

/* The flyer is CONTEXT, not the page. Capped small so the form stays the
   first thing a student can act on — on a phone a full-width portrait poster
   pushes the whole form below the fold. */
/* On the standalone form this block IS the header — there is no brand bar
   above it — so the flyer carries the identity and gets real size. */
.event-head-lead {
  border-left: 0;
  padding: 0;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 2rem;
}

.event-head-lead .event-flyer { width: 150px; }
.event-head-lead .event-name { font-size: 1.15rem; }

.event-flyer {
  width: 96px;
  height: auto;
  flex: 0 0 auto;
  border: 1px solid var(--rule);
}

.event-facts { min-width: 0; }

.event-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.event-when { margin: 0.15rem 0 0; color: var(--ink); }

/* "REQUIRED" was breaking mid-word ("REQUI / RED") beside a two-line consent
   label. It is a tag, not prose — it must never hyphenate itself. */
.req,
.opt { white-space: nowrap; }

/* ---------- type ----------
   Syncopate for display lines only: a wide all-caps face, unreadable in a
   paragraph and unmistakable in a heading. Inter carries body text. */
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Helvetica, Arial, sans-serif;
}

.event-name {
  font-family: Syncopate, Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-name { font-size: 0.95rem; }

h1 {
  font-family: Syncopate, Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.25;
}