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

body {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  color: #1a1a1a;
  background: #fcfcfa;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

a { color: #1a4a8a; text-decoration: underline; }
a:visited { color: #5a3a7a; }
a:hover { color: #a03020; }

hr { border: none; border-top: 1px solid #d0c8c0; margin: 8px 0; }

.wrap { max-width: 780px; margin: 0 auto; padding: 10px 16px; }

/* header */
#hd { border-bottom: 2px solid #1a1a1a; padding: 12px 0 8px; }
#hd .wrap { display: flex; align-items: baseline; gap: 14px; }
#hd h1 { font-size: 22px; margin: 0; font-weight: 400; letter-spacing: -0.5px; }
#hd h1 a { color: #1a1a1a; text-decoration: none; }
#hd small { color: #888; font-size: 13px; font-style: italic; }

/* filters */
#filters { padding: 10px 0; border-bottom: 1px solid #d0c8c0; }
#filters input[type="search"] {
  font-family: inherit; font-size: 13px;
  border: 1px solid #b0a898; padding: 4px 8px; width: 100%;
  background: #fff;
}
.frow:first-child { margin-top: 0; }
#filters select {
  font-family: inherit; font-size: 12px;
  border: 1px solid #b0a898; padding: 3px 5px;
  background: #fff;
}
#filters label { font-size: 12px; }
.frow { margin-top: 6px; }
.frow select, .frow label { margin-right: 8px; }

/* quick date & scene links */
#quick a, #scenes a, #areas a { margin-right: 8px; font-size: 12px; text-decoration: none; color: #1a4a8a; }
#quick a:hover, #scenes a:hover, #areas a:hover { text-decoration: underline; }
#quick a.on, #scenes a.on, #areas a.on { font-weight: bold; color: #1a1a1a; text-decoration: none; }

/* results */
#info { color: #888; font-size: 12px; padding: 8px 0 4px; font-style: italic; }

/* event list */
#events { list-style: none; padding: 0; margin: 0; }
#events li { padding: 5px 0; }
#events li + li { border-top: 1px solid #e8e4e0; }

.ev-date { color: #777; font-size: 12px; }
.ev-title { font-size: 14px; }
.ev-venue { color: #777; font-size: 12px; font-style: italic; }
.ev-scene { color: #996633; font-size: 11px; font-style: italic; }
.ev-cat { color: #aaa; font-size: 11px; }
.ev-free { color: #2a6a2a; font-size: 11px; font-weight: bold; font-style: normal; }

/* film view */
.film-item { padding: 8px 0; }
.film-item .ev-title { font-size: 15px; }
.film-desc { color: #777; font-size: 12px; font-style: italic; margin: 3px 0; line-height: 1.4; }
.film-times { margin-top: 4px; }
.film-showtime { display: inline-block; font-size: 12px; color: #555; margin-right: 14px; margin-bottom: 2px; }
.film-showtime::before { content: "▸ "; color: #bbb; }

/* pagination */
#pag { padding: 12px 0; font-size: 12px; }
#pag a { margin-right: 12px; }

/* detail page */
#detail { padding: 14px 0; }
#detail h1 { font-size: 22px; margin: 0 0 6px; font-weight: 700; }
#detail .meta { color: #777; font-size: 13px; margin-bottom: 12px; font-style: italic; }
#detail .desc { margin: 12px 0; max-width: 580px; line-height: 1.7; }
#detail dt { color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 12px; font-family: sans-serif; }
#detail dd { margin: 2px 0 0 0; }
#detail .back { font-size: 12px; margin-bottom: 12px; display: block; }
#detail .ts { color: #aaa; font-size: 11px; margin-top: 20px; font-style: italic; }

/* actions */
#detail .actions { margin-top: 14px; font-size: 12px; }

/* footer */
#ft { margin-top: 16px; padding: 10px 0; border-top: 1px solid #e8e4e0; font-size: 11px; color: #aaa; font-style: italic; }
#ft a { color: #aaa; }

/* empty / loading */
.msg { color: #aaa; padding: 24px 0; text-align: center; font-style: italic; }

@media (max-width: 600px) {
  .wrap { padding: 8px 12px; }

  #hd h1 { font-size: 18px; }
  #hd small { font-size: 11px; }

  #filters input[type="search"] { width: 100%; font-size: 16px; padding: 8px 10px; }

  /* bigger tap targets for filter links */
  #quick a, #scenes a, #areas a {
    display: inline-block;
    padding: 4px 2px;
    margin-right: 6px;
    font-size: 13px;
    line-height: 1.8;
  }

  .frow { margin-top: 4px; }

  /* event rows need more breathing room */
  #events li { padding: 8px 0; }

  /* stack event info vertically */
  .ev-date { display: block; margin-bottom: 1px; }
  .ev-venue { display: block; }
  .ev-scene { display: block; }
  .ev-title { font-size: 15px; }

  /* detail page */
  #detail h1 { font-size: 20px; }
  #detail .desc { font-size: 14px; line-height: 1.6; }
}