/*
 * STYLE for the public site (index.php and the templates it includes).
 * The admin uses Pico CSS instead: see admin.css.
 */
:root {
  --bg: #fafaf8; --fg: #1d1d1b; --muted: #6b6b66; --line: #e3e2dc;
  --card: #fff; --accent: #00f; --ok: #15803d; --warn: #fef3c7;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161615; --fg: #ecebe6; --muted: #9c9b94; --line: #2e2d2a;
          --card: #1f1f1d; --accent: #fb923c; --ok: #4ade80; --warn: #3b2f0b; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 0 16px 64px; }
a { color: var(--accent); }
h2 { margin: 32px 0 12px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
header.site { max-width: 760px; margin: 0 auto; padding: 20px 16px 0; font-weight: 700; font-size: 1.4rem; }
header.site a { color: var(--fg); text-decoration: none; }

.event { display: flex; gap: 16px; background: var(--card); border: 1px solid var(--line);
         border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.event .pic { flex: 0 0 160px; }
.event .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event .body { padding: 14px 16px 14px 0; min-width: 0; }
.event:not(:has(.pic)) .body { padding-left: 16px; }
.event h3 { margin: 2px 0 4px; font-size: 1.15rem; }
.event h3 a { color: var(--fg); text-decoration: none;     font-size: 3vw;
  line-height: 1;
  color: lemonchiffon;}
.event .when { margin: 0; color: var(--accent); font-weight: 600; font-size: .9rem; }
.event .where { margin: 0; color: var(--muted); }
.event .desc { margin: 8px 0 0; }
.event .links { margin: 8px 0 0; display: flex; gap: 16px; }
.single .event { display: block; }
.single .event .pic img { height: auto; max-height: 70vh; object-fit: contain; background: #000; }
.single .event .body { padding: 16px; }
.archive .event { opacity: .8; }
@media (max-width: 560px) {
  .event { display: block; }
  .event .pic img { height: auto; aspect-ratio: 16/9; }
  .event .body { padding: 12px 14px; }
}

.empty { color: var(--muted); }
.notice { background: var(--warn); padding: 8px 12px; border-radius: 6px; }


/* Keep the line breaks someone typed in a description */
.event .desc { white-space: pre-line; }