:root {
  --ink: #1b1b1b;
  --muted: #6f6a62;
  --rule: #d9d4ca;
  --paper: #f7f4ee;
  --mark: #b3261e;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e4dc;
    --muted: #9a958c;
    --rule: #3a3833;
    --paper: #161514;
    --mark: #ef6a5e;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Reserve the scrollbar's space on every page so the layout doesn't shift between short and long pages. */
  scrollbar-gutter: stable;
}

body {
  margin: 0 auto;
  max-width: 60rem;
  padding: 1.25rem 1rem 3rem;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.45 "Iowan Old Style",
    "Palatino Linotype",
    Palatino,
    "Book Antiqua",
    Georgia,
    serif;
  font-variant-numeric: tabular-nums;
}

a {
  color: inherit;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: currentColor;
}

button {
  font: inherit;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

button:hover {
  color: var(--ink);
}

/* ---- header ---- */

header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}

.mark {
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}

nav {
  display: flex;
  gap: 1rem;
}

nav a {
  text-decoration: none;
  color: var(--muted);
}

nav a[aria-current] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--mark);
}

.region {
  margin-left: auto;
  display: flex;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.region button[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 700;
}

/* ---- headings ---- */

h1 {
  font-size: 1.75rem;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.125rem;
  margin: 0 0 0.35rem;
}

.heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 1rem 0 1.25rem;
}

.meta,
.city {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
}

.toggle {
  margin: 0;
  display: flex;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.toggle a {
  color: var(--muted);
  text-decoration: none;
}

.toggle a[aria-current] {
  color: var(--ink);
  font-weight: 700;
}

.day-title {
  margin-top: 1.25rem;
}

.page-title {
  margin: 1rem 0 0.5rem;
}

.empty {
  color: var(--muted);
  font-style: italic;
}

/* ---- day strip ---- */

.days {
  position: relative; /* so the page script can measure days against it */
  list-style: none;
  margin: 0;
  padding: 0 0 0.25rem;
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
  scrollbar-width: none;
  /* Fade the right edge so it's clear the strip scrolls when there are more days than fit. */
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.days a {
  display: block;
  padding: 0.2rem 0.45rem;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9375rem;
}

.days a span {
  color: var(--muted);
  font-size: 0.8125rem;
}

.days a[aria-current] {
  background: var(--ink);
  color: var(--paper);
}

.days a[aria-current] span {
  color: inherit;
}

/* ---- listings ---- */

section {
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}

section h2 {
  display: flex;
  flex-wrap: wrap; /* on narrow screens the links drop below a long title */
  align-items: baseline;
  gap: 0.15rem 1rem;
}

section h2 > a {
  text-decoration: none;
}

.actions {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
}

.actions a {
  color: var(--muted);
  text-decoration: none;
}

.actions a:hover {
  color: var(--ink);
}

.links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
}

dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: 0.3rem 1rem;
}

dt {
  color: var(--muted);
}

dt a {
  text-decoration: none;
}

dd {
  margin: 0;
}

.theater dt,
.theater-page dt {
  color: var(--ink);
}

.t {
  text-decoration: none;
  white-space: nowrap;
}

a.t:hover {
  text-decoration: underline;
}

.t small {
  margin-left: 0.3em;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---- day timeline ---- */

/* Every row on the Days page shares one horizontal time scale. The label column has a fixed
   width so all timelines start at the same x, and --lead is that x for the hour axis. */
.day-list {
  --label-w: 13.25rem; /* fits the longest theater name */
  --lead: calc(var(--label-w) + 1rem);
}

.day-list.with-posters {
  --lead: calc(4.5rem + 1rem + var(--label-w) + 1rem);
}

.day-list dl {
  grid-template-columns: var(--label-w) minmax(0, 1fr);
}

/* Every row is one lane tall (a time plus its note line), whether or not it has notes. Names
   that don't fit are truncated rather than wrapped so they can't make a row taller. */
.day-list dt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Theater pages have no section headings between the axis and the rows. */
.day-list > dl {
  margin-top: 0.6rem;
}

/* Current time: one bar down the whole list, behind the time labels. Position comes from --now
   (0..1 across the timeline), set by the page script. */
.day-list,
.now-scope {
  position: relative;
}

.now-line {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--lead) + (100% - var(--lead)) * var(--now, 0));
  width: 0;
  border-left: 1px solid color-mix(in srgb, var(--mark) 45%, transparent);
  pointer-events: none;
}

.show-now .now-line {
  display: block;
}

.show-now .axis-track::after {
  content: "";
  position: absolute;
  left: calc(100% * var(--now, 0));
  bottom: -0.25rem;
  transform: translateX(-3px);
  border: 3px solid transparent;
  border-bottom-color: color-mix(in srgb, var(--mark) 70%, transparent);
}

.timeline .t,
.day-list h2 > a,
.day-list dt a {
  position: relative;
  z-index: 1;
  background: var(--paper);
}

.timeline .t {
  position: absolute;
}

.axis {
  position: sticky;
  top: 0;
  z-index: 2; /* above time labels and titles (z-index 1) scrolling underneath */
  background: var(--paper);
  padding: 0.35rem 0 0.25rem var(--lead);
  border-bottom: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--muted);
}

.axis-track {
  position: relative;
  height: 1.1em;
}

.axis-track span {
  position: absolute;
  top: 0;
  transform: translateX(-1px);
}

.timeline {
  --lane-h: 2.15rem;
  position: relative;
  min-height: var(--lane-h);
  /* faint line at each hour */
  background-image: linear-gradient(to right, color-mix(in srgb, var(--rule) 55%, transparent) 1px, transparent 1px);
  background-size: calc(100% / var(--hours)) 100%;
}

.timeline .t {
  position: absolute;
  top: 0;
  padding: 0 0.15rem 0 0.2rem;
  margin-left: -0.2rem;
  max-width: 5rem;
  height: var(--lane-h);
  background: var(--paper);
  line-height: 1.3;
}

.timeline .t small {
  display: block;
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kind {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- alerts ---- */

.alert {
  margin: 0 0 1rem;
  padding: 0.4rem 0 0.4rem 0.75rem;
  border-left: 2px solid var(--mark);
  font-size: 0.875rem;
  color: var(--muted);
}

.alert a {
  color: var(--mark);
}

/* ---- posters ---- */

.poster,
.thumb,
.poster-large {
  display: block;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--rule);
}

.poster {
  width: 4.5rem;
}

.thumb {
  width: 2.25rem;
  flex: none;
  align-self: center;
}

.poster-large {
  width: 10rem;
}

section.has-poster {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 1rem;
  align-items: start;
}

.movie-head {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  margin: 1rem 0 1.25rem;
}

h2 .facts {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}

.movie-head .facts {
  margin: 0.25rem 0 0;
}

.movie-head .links {
  margin-top: 0.4rem;
}

/* ---- lists ---- */

.theater-list,
.movie-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.theater-list li,
.movie-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
}

.movie-list li {
  flex-wrap: nowrap;
}

.movie-list li > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.75rem;
}

.movie-list li > a,
.movie-list li > div > a {
  font-weight: 600;
  text-decoration: none;
}

.theater-list .meta {
  margin-left: auto;
}

.error {
  color: var(--mark);
}

.problem {
  flex-basis: 100%;
  font-size: 0.8125rem;
  color: var(--muted);
}

.problem summary {
  cursor: pointer;
}

.problem pre {
  white-space: pre-wrap;
  margin: 0.4rem 0;
  font-size: 0.75rem;
}

.problem p {
  margin: 0.4rem 0;
}

.city-group {
  border-top: 0;
}

input[type="search"] {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--muted);
  padding: 0.1rem 0;
  width: 12rem;
  outline: none;
}

input[type="search"]:focus {
  border-bottom-color: var(--ink);
}

[hidden] {
  display: none !important;
}

/* ---- error page ---- */

.error-page pre {
  white-space: pre-wrap;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---- footer ---- */

footer {
  margin-top: 2.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.8125rem;
}

footer form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}

footer button {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.18em;
}

@media (max-width: 34rem) {
  .region {
    margin-left: 0;
    width: 100%;
  }

  dl {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  dd {
    margin-bottom: 0.5rem;
  }

  .poster {
    width: 3.25rem;
  }

  .day-list {
    --label-w: 0px;
    --lead: 0px;
  }

  .day-list.with-posters {
    --lead: calc(3.25rem + 0.75rem);
  }

  .day-list dl {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Narrow timelines: smaller labels so fewer have to stack. */
  .timeline {
    --lane-h: 1.95rem;
  }

  .timeline .t {
    font-size: 0.875rem;
  }

  section.has-poster {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0 0.75rem;
  }

  .poster-large {
    width: 7rem;
  }
}