/* cineclock styles

   1. Fonts and tokens
   2. Base and layout (header, footer, page titles)
   3. Shared pieces (panels, icons, posters, pills, ratings, booking buttons)
   4. Filters and the date picker
   5. Day listings (Showtimes and theatre pages)
   6. Home
   7. Films list
   8. Film page
   9. Theatres list and theatre page
   10. Wider screens
*/

/* 1. Fonts and tokens */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

:root {
  --bg: #14181c;
  --raised: #1c2228;
  --line: #2c3440;
  --text: #9ab;
  --bright: #dde5ed;
  --white: #fff;
  --accent: #8830df;
  /* The brand purple is too dark for small text on this background, so text uses a lighter tint. */
  --accent-text: #b98af0;
  --accent-wash: rgba(136, 48, 223, 0.18);
  /* Cards and panels share one surface, so every module looks related. */
  --panel: #191e24;
  --panel-line: #252c35;
  --radius: 12px;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --gutter: 1rem;
  --header-h: 3.5rem;
}

/* 2. Base and layout */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 0.9375rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

.wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(20, 24, 28, 0.9);
  backdrop-filter: blur(12px);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--header-h);
}

.wordmark { display: block; line-height: 0; }
.wordmark img { width: auto; height: 1.75rem; }

.site-nav {
  display: flex;
  gap: 1.125rem;
  margin-left: auto;
  font-size: 0.9375rem;
  font-weight: 500;
}

.site-nav a {
  padding: 0.25rem 0;
  white-space: nowrap;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--white); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }

.page-title {
  margin: 2rem 0 0;
  font: 700 2rem/1.1 var(--serif);
  color: var(--white);
}

.page-intro { margin: 0.375rem 0 0; }

.section-heading {
  margin: 2.25rem 0 0;
  font: 700 1.125rem/1.3 var(--sans);
  color: var(--white);
}

.meta {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
}

.year { font-weight: 400; color: var(--text); }

.empty {
  margin: 2rem 0;
  padding: 1.25rem;
  border: 1px dashed var(--line);
  border-radius: 4px;
}

.empty code { color: var(--bright); }

/* Small linked buttons: address, website, About page links. */
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.links a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  background: var(--raised);
  color: var(--bright);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

.links a:hover { background: var(--line); }

.about {
  max-width: 38rem;
  color: var(--bright);
}

.about p { margin: 1rem 0 0; }
.about-page .about p:first-child { margin-top: 1.25rem; }
.about-links .source-logo { height: 0.75rem; }

.site-footer {
  margin-top: 4rem;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
}

.site-footer p { margin: 0 0 0.375rem; }

.site-footer .footer-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.footer-links a { display: inline-flex; color: var(--bright); text-decoration: none; }
.footer-links a:hover { color: var(--white); }

/* 3. Shared pieces */

.panel {
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  background: var(--panel);
}

.icon { flex: none; color: var(--text); }

.poster {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--raised);
}

.poster img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The frame's inner border sits on top of the image, as on Letterboxd. */
.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(221, 238, 255, 0.12);
  pointer-events: none;
}

/* A film with no poster shows its title in the frame instead of an empty box. */
.poster-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0.5rem;
  background: linear-gradient(160deg, #2a2236, var(--panel) 70%);
  color: var(--bright);
  font: 600 0.75rem/1.2 var(--serif);
}

/* Pills. Each family has its own look so they can be told apart at a glance:
   rare showings filled purple, formats outlined purple, events quiet grey.
   Personal pills (watchlist, watched) will be green. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* Same pill as on the cards: events are a purple wash, film formats a purple outline. */
.tag .icon { color: inherit; }
.tag-rare { background: var(--accent); color: var(--white); }
.tag-format { border-color: var(--accent); color: var(--accent-text); }
.tag-event { background: var(--accent-wash); color: var(--accent-text); }
.tag-personal { border-color: #3fb27f; color: #6fd3a4; }

/* Theatre pills: the theatre's own logo, sized so wide and tall logos read alike. */
.venue-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 1.5rem;
  vertical-align: middle;
}

.venue-pill img { display: block; }

.monogram {
  color: var(--bright);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.card-venues {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-top: 0.375rem;
}

/* Ratings */
.ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
}

.ratings b { color: var(--bright); font-weight: 600; }
.ratings .card-rating { font-size: 0.8125rem; }
.ratings .card-rating .source-logo { height: 0.875rem; }

.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.source-logo { width: auto; height: 0.875rem; }

.source-label {
  padding: 0 0.25rem;
  border-radius: 3px;
  background: var(--raised);
  color: var(--text);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* Booking buttons. Each time is the link that books it, and they always sit
   in their own row at the bottom of a block, from its left edge. */
.times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.time {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.375rem;
  padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--raised);
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-decoration: none;
}

.time:hover { border-color: var(--accent); }
.time .icon { color: var(--accent-text); }

/* The only chance to see it: the booking button itself stands out. */
.time-rare { border-color: var(--accent); background: var(--accent-wash); }
.time-text { display: flex; flex-direction: column; }

.time small {
  color: var(--text);
  font-size: 0.6875rem;
  font-weight: 500;
}

/* 4. Filters and the date picker */

.filters { margin-top: 1rem; }

.filter-top {
  display: flex;
  gap: 0.5rem;
}

.filter-top select {
  flex: none;
  padding: 0 0.625rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--raised);
  color: var(--bright);
  font: 500 0.875rem var(--sans);
}

.search {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.search .icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.filters input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 0.625rem 0.75rem 0.625rem 2.25rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--raised);
  color: var(--white);
  font: inherit;
}

.filters input::placeholder { color: var(--text); }

.filters input:focus-visible,
.filter-top select:focus-visible,
.filter-menus summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Menus open full-width under the filter bar, so they never run off a phone screen. */
.filter-menus {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

.filter-menus summary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--bright);
  font-size: 0.8125rem;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.filter-menus summary::-webkit-details-marker { display: none; }

.filter-menus summary::after {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.filter-menus details[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.filter-menus details.active summary { border-color: var(--accent-text); color: var(--accent-text); }

.count:empty { display: none; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.filter-menus .chips {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  left: 0;
  z-index: 5;
  margin: 0;
  padding: 0.625rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--raised);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.5);
}

.chip {
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--bright);
  font: 500 0.8125rem/1.3 var(--sans);
  cursor: pointer;
}

.chip:hover { border-color: var(--text); }

.chip[aria-pressed="true"] {
  border-color: var(--accent-text);
  background: var(--accent);
  color: var(--bg);
}

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

/* Theatre chips show the theatre's logo; unpicked ones are dimmed. */
.chip-logo { display: inline-flex; align-items: center; padding: 0.375rem 0.875rem; }
.chip-logo .venue-pill { min-height: 0; }
.chip-logo img { opacity: 0.6; transition: opacity 120ms; }
.chip-logo[aria-pressed="true"] img,
.chip-logo:hover img { opacity: 1; }
.chip-logo[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); }

.clear {
  padding: 0.375rem 0.5rem;
  border: 0;
  background: none;
  color: var(--text);
  font: 500 0.8125rem var(--sans);
  text-decoration: underline;
  cursor: pointer;
}

.filter-status {
  min-height: 1.2em;
  margin: 0.625rem 0 0;
  font-size: 0.8125rem;
}

/* The date picker: a calendar button with a month view, then a strip of day chips. */
.date-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.date-strip {
  display: flex;
  flex: 1;
  gap: 0.375rem;
  margin-right: calc(var(--gutter) * -1);
  padding-right: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.date-strip::-webkit-scrollbar { display: none; }

.date-strip a {
  flex: none;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: var(--raised);
  color: var(--bright);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

.date-strip a:hover { background: var(--line); }

.cal-pop summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent-text);
  list-style: none;
  cursor: pointer;
}

.cal-pop summary::-webkit-details-marker { display: none; }
.cal-pop[open] summary { border-color: var(--accent); background: var(--raised); }

.cal-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 5;
  display: grid;
  gap: 1.25rem;
  width: min(20rem, 100%);
  max-height: 70vh;
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raised);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.cal-title { margin: 0 0 0.5rem; color: var(--white); font-weight: 600; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  text-align: center;
}

.cal-dow { color: var(--text); font-size: 0.6875rem; font-weight: 600; }

.cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 999px;
  color: var(--line);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.cal-day.has-shows {
  background: rgba(136, 48, 223, 0.22);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.cal-day.has-shows:hover { background: var(--accent); }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--accent-text); }

/* 5. Day listings */

.day { scroll-margin-top: calc(var(--header-h) + 0.5rem); }

/* The date is a bar that sticks under the header while you scroll through
   that day, so you always know where you are. */
.day-bar {
  position: sticky;
  top: calc(var(--header-h) + 1px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem calc(var(--gutter) * -1) 0;
  padding: 0.625rem var(--gutter);
  border-bottom: 1px solid var(--line);
  background: rgba(20, 24, 28, 0.92);
  backdrop-filter: blur(8px);
  color: var(--white);
  font: 600 1.0625rem/1.3 var(--sans);
}

.day-bar .icon { color: var(--accent-text); }

/* Right under the date pills, the first day doesn't need the full gap. */
.date-tools + .day .day-bar,
.date-tools + script + .day .day-bar { margin-top: 0.75rem; }

.venue-group { margin-top: 0.875rem; padding: 0 1.125rem 0.375rem; }
.venue-group .row:last-child { padding-bottom: 0.875rem; }

/* Each theatre's logo has a rule running out to the edge, marking where its
   listings start. */
.venue-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.125rem 0 0.625rem;
  font: 600 0.8125rem/1.3 var(--sans);
  letter-spacing: 0.02em;
}

.venue-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.venue-heading a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.venue-heading a:hover { color: var(--white); }

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

.row {
  display: grid;
  grid-template-columns: 5.75rem 1fr;
  gap: 0.875rem;
  padding: 0.75rem 0;
}

.row + .row { border-top: 1px solid var(--panel-line); }
.row .times { grid-column: 1 / -1; margin-top: 0.125rem; }

.row-title {
  margin: 0;
  color: var(--white);
  font: 600 1.125rem/1.25 var(--sans);
}

.row-title a { text-decoration: none; }
.row-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 6. Home */

.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}

.tagline { margin: 0; white-space: nowrap; }

/* The way into the Letterboxd features, styled after Letterboxd's own buttons. */
.lb-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.lb-button img { width: auto; height: 0.75rem; }
.lb-button:hover { border-color: var(--bright); }

/* Hero: a few highlights, each a full-width slide with its art fading into the
   page. Without the script it's a sideways scroll; with it, a looping carousel. */
.hero {
  position: relative;
  margin-top: 0.875rem;
  overflow: hidden;
}

/* Each slide is a little narrower than the hero, so the next one peeks in. */
.hero-track {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.hero-track::-webkit-scrollbar { display: none; }

.hero.is-carousel .hero-track {
  overflow: visible;
  touch-action: pan-y;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.spotlight {
  position: relative;
  display: block;
  flex: 0 0 calc(100% - 1.75rem);
  height: 15rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--white);
  text-decoration: none;
  scroll-snap-align: start;
  user-select: none;
  -webkit-user-drag: none;
}

.spotlight-art { pointer-events: none; }

.hero-dots {
  position: absolute;
  top: 0.75rem;
  right: 2.625rem;
  z-index: 2;
  display: flex;
  gap: 0.375rem;
}

.hero-dots button {
  width: 0.4375rem;
  height: 0.4375rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.hero-dots button[aria-current="true"] { width: 1.125rem; background: var(--white); }

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -1.125rem;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 24, 28, 0.7);
  color: var(--white);
  cursor: pointer;
}

.hero-arrow.prev { left: 0.75rem; }
.hero-arrow.prev .icon { transform: scaleX(-1); }
.hero-arrow.next { right: 2.5rem; }

@media (hover: hover) {
  .hero-arrow:not([hidden]) { display: flex; opacity: 0; transition: opacity 150ms; }
  .hero:hover .hero-arrow,
  .hero-arrow:focus-visible { opacity: 1; }
}

.spotlight-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 24, 28, 0.95), rgba(20, 24, 28, 0.2) 65%),
    linear-gradient(to right, rgba(20, 24, 28, 0.6), rgba(20, 24, 28, 0) 60%);
}

.spotlight-body {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
  display: grid;
  gap: 0.375rem;
}

.eyebrow {
  display: inline-flex;
  max-width: 100%;
  padding: 0.0625rem 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(185, 138, 240, 0.45);
  border-radius: 999px;
  background: rgba(20, 24, 28, 0.86);
  white-space: nowrap;
  text-overflow: ellipsis;
  backdrop-filter: blur(4px);
  align-items: center;
  gap: 0.3125rem;
  justify-self: start;
  color: var(--accent-text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}

.eyebrow .icon { flex: none; }

.spotlight-title { font: 700 1.75rem/1.1 var(--serif); }
.spotlight-title .year { font-family: var(--sans); font-size: 1rem; }
.spotlight:hover .spotlight-title { text-decoration: underline; text-underline-offset: 4px; }

.spotlight-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.875rem;
  color: var(--bright);
  font-size: 0.8125rem;
}

.spotlight-meta > span:not(.venue-pill) { display: inline-flex; align-items: center; gap: 0.3125rem; }
.spotlight .tags { margin-top: 0.125rem; }

/* Shortcuts under the spotlight. */
/* Three shortcuts under the hero, sharing the width evenly. */
.quick-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.quick-filters a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raised);
  color: var(--bright);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.quick-filters a:hover { border-color: var(--accent); color: var(--white); }
.quick-filters .icon { color: var(--accent-text); }

/* Shelves */
.rail { margin-top: 1.5rem; }
/* On a theatre's own page its logo on every poster would just repeat the header. */
.theatre-rails { margin-top: 1rem; }
.theatre-rails .card-venues { display: none; }

.home-top + .rail,
.quick-filters + .rail { margin-top: 0.75rem; }

.rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.rail-head h2 {
  margin: 0;
  color: var(--white);
  font: 700 1.125rem/1.3 var(--sans);
}

.rail-head h2 a { text-decoration: none; }
.rail-head a:hover { color: var(--white); }

.rail-head .see-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-right: -0.5rem;
  text-decoration: none;
}

.rail-cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 7.25rem;
  gap: 0.75rem;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0.5rem var(--gutter) 0.25rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.rail-cards::-webkit-scrollbar { display: none; }

.card { scroll-snap-align: start; }
.card a { display: block; text-decoration: none; }

/* Theatre logos straddle the poster's bottom right corner, so they cover as
   little of the art as possible and never move with the title. A drop
   shadow keeps white logos readable over a light poster. */
.card-art { position: relative; display: block; }

/* One badge on the poster's top-right corner for anything special, like a
   label on the print. The watchlist mark takes the top-left. */
.card-badge {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  max-width: calc(100% - 2.5rem);
  padding: 0.0625rem 0.4375rem;
  overflow: hidden;
  border: 1px solid rgba(185, 138, 240, 0.45);
  border-radius: 999px;
  background: rgba(20, 24, 28, 0.86);
  color: var(--accent-text);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
  backdrop-filter: blur(4px);
}

.card-badge .icon { flex: none; }

/* Where it's playing: the theatres' logos in a row, the card's last line. */
.card .card-venues {
  flex-wrap: nowrap;
  gap: 0.5rem;
  height: 0.875rem;
  margin-top: 0.4375rem;
  overflow: hidden;
}

/* Logos share the line: two shrink to fit rather than one being cut off. */
.card .venue-pill { flex: 0 1 auto; min-width: 0; min-height: 0; }
.card .venue-pill img { width: auto; max-width: 100%; height: 0.75rem; object-fit: contain; object-position: left; }

.card-title {
  display: block;
  margin-top: 0.5rem;
  overflow: hidden;
  color: var(--bright);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card a:hover .card-title { color: var(--white); }

/* Year on the left, score (or a tag when there's no score) pinned to the right,
   so both sit in the same place on every card. */
.card-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  min-height: 1.25rem;
  font-size: 0.75rem;
}

.card-sub .year { font-size: 0.8125rem; }

.card-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  color: var(--bright);
  font-size: 0.75rem;
}

.card-rating b { font-weight: 600; }
.card-rating .source-logo { height: 0.6875rem; }

.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  min-width: 0;
  padding: 0 0.375rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-text);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-tag .icon { flex: none; }
.card-unrated { background: var(--raised); color: var(--text); font-weight: 500; }

.card-next {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.125rem;
  overflow: hidden;
  font-size: 0.6875rem;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The only screening: a small filled purple star instead of a badge. */
.card-next.rare .icon { color: var(--accent-text); fill: currentColor; }

.all-showtimes { margin: 2.5rem 0 0; }

.all-showtimes a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-radius: 4px;
  background: var(--raised);
  color: var(--bright);
  font-weight: 600;
  text-decoration: none;
}

.all-showtimes a:hover { background: var(--line); }

/* 7. Films list: the same poster cards as the home rails, in a grid. */

.film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 1.25rem 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

/* 8. Film page */

.backdrop {
  position: relative;
  height: 14rem;
  overflow: hidden;
  background: var(--raised);
}

.backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0.7;
}

.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 24, 28, 0) 40%, var(--bg)),
    linear-gradient(to right, var(--bg), rgba(20, 24, 28, 0) 15%, rgba(20, 24, 28, 0) 85%, var(--bg));
}

.film-head {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.125rem;
  align-items: end;
  margin-top: 1.5rem;
}

.has-backdrop .film-head { position: relative; margin-top: -4.5rem; }

/* On phones genres, pills and notes run full width under the poster and
   title, so a long note can't push the poster down. */
.film-details { grid-column: 1 / -1; }
.film-details > :first-child { margin-top: 0; }
.film-head .poster-fallback { padding: 0.75rem; font-size: 1.125rem; }

.film-title {
  margin: 0;
  color: var(--white);
  font: 700 2.125rem/1.05 var(--serif);
  letter-spacing: -0.01em;
}

.film-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.875rem;
  margin: 0.5rem 0 0;
}

.film-sub > span { display: inline-flex; align-items: center; gap: 0.3125rem; }
.film-sub b { color: var(--bright); font-weight: 500; }

.film-head .tags,
.film-head .genres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.75rem 0 0;
}

.film-head .tag { padding: 0.1875rem 0.625rem; font-size: 0.6875rem; }

.genre {
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  background: var(--raised);
  color: var(--bright);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

/* A note that applies to every showing, shown once. */
.film-note {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
  color: var(--bright);
  font-size: 0.875rem;
}

.scores {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.scores li {
  flex: 1;
  min-width: 0;
  max-width: 8rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: var(--panel);
}

.scores a { display: block; text-decoration: none; }

.scores .source-logo {
  display: block;
  height: 1.125rem;
  margin-bottom: 0.375rem;
}

.score-value {
  display: block;
  color: var(--white);
  font: 700 1.375rem/1.1 var(--sans);
  font-variant-numeric: tabular-nums;
}

.synopsis {
  max-width: 38rem;
  margin: 1.5rem 0 0;
  color: var(--bright);
  font: 400 1.0625rem/1.6 var(--serif);
}

/* Showtimes: a block per theatre (logo and rule), then each date and its
   times. A new block starts only when the theatre changes. */
.showing { padding: 0.75rem 0; }
.showing + .showing { border-top: 1px solid var(--panel-line); }
.showing:last-child { padding-bottom: 1rem; }

.showing-when {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0;
  color: var(--white);
  font-weight: 600;
}

.showing-when .icon { color: var(--accent-text); }
.showing .times { margin-top: 0.5rem; }
.showing .tags,
.showing .showing-note { margin: 0.5rem 0 0; }

/* The poster popup on a film page. */
.poster-zoom { display: block; cursor: zoom-in; }
.poster-zoom:hover .poster { border-color: var(--bright); }

.poster-dialog {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-out;
}

.poster-dialog::backdrop {
  background: rgba(10, 12, 14, 0.88);
  backdrop-filter: blur(6px);
}

.poster-dialog img {
  display: block;
  width: auto;
  max-width: 92vw;
  height: auto;
  max-height: 88vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .poster-dialog[open] img { animation: poster-in 180ms ease-out; }
  @keyframes poster-in { from { opacity: 0; transform: scale(0.94); } }
}

/* 9. Theatres list and theatre page */

.theatre-name {
  color: var(--white);
  font: 700 1.25rem/1.2 var(--serif);
}

.theatre-blurb {
  margin-top: 0.25rem;
  color: var(--bright);
  font-size: 0.875rem;
}

/* Theatres list: a card per theatre with its photo, logo and top three pills. */
.theatre-cards {
  display: grid;
  gap: 0.875rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.theatre-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
}

.theatre-card:hover .theatre-name { text-decoration: underline; text-underline-offset: 3px; }

.theatre-card-art {
  position: relative;
  display: block;
  height: 9rem;
  background: var(--raised);
}

.theatre-card-art img:first-child:not(.theatre-card-logo) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.theatre-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(25, 30, 36, 0), var(--panel));
}

.theatre-card-logo {
  position: absolute;
  bottom: 0.75rem;
  left: 1rem;
  z-index: 1;
  max-width: 70%;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
}

.theatre-card-body {
  display: grid;
  gap: 0.375rem;
  padding: 0.25rem 1rem 1rem;
}

.theatre-card-body .meta { display: flex; align-items: center; gap: 0.25rem; margin: 0; }
.theatre-card-body .tags { margin-top: 0.25rem; }

/* Theatre page: the outside photo across the top, fading into the page,
   with the full logo over its lower edge. */
.theatre-hero {
  position: relative;
  height: 17rem;
  overflow: hidden;
  background: var(--raised);
}

.theatre-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.theatre-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 24, 28, 0.15), rgba(20, 24, 28, 0) 30%, var(--bg));
}

.theatre-hero + .wrap { position: relative; }

.theatre-head { margin-top: 2rem; }
.theatre-head.over-hero { position: relative; margin-top: -6.5rem; }

.theatre-head .meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.875rem;
}

.venue-title {
  margin: 0;
  color: var(--white);
  font: 700 2rem/1.1 var(--serif);
}

.theatre-full-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 4rem;
  object-fit: contain;
  object-position: left center;
}

.over-hero .theatre-full-logo {
  width: var(--w);
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
}

/* One row that scrolls sideways, running off the screen's edge so it's clear there's more. */
.theatre-offers .tags {
  flex-wrap: nowrap;
  margin: 0.75rem calc(var(--gutter) * -1) 0;
  padding: 0 var(--gutter) 0.125rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.theatre-offers .tags::-webkit-scrollbar { display: none; }
.theatre-offers .tag { flex: none; }
/* On a theatre page, filled pills are links to its films; hollow ones are room features. */
.theatre-offers .tag-link { border-color: transparent; background: var(--accent-wash); color: var(--accent-text); }
.theatre-offers span.tag,
.theatre-card-body .tag { border-color: var(--line); background: none; color: var(--text); }
.tag-link { text-decoration: none; }
.tag-link:hover { border-color: var(--accent-text); color: var(--white); }

.venue-blurb {
  max-width: 36rem;
  margin: 0.75rem 0 0;
  color: var(--bright);
}

/* A multiplex's rooms swipe sideways like the hero, each card a bit narrower
   than the screen so the next one shows at the edge. */
.room-swipe {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 0.75rem;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 0.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.room-swipe::-webkit-scrollbar { display: none; }
.room-swipe .room { scroll-snap-align: start; }

.room-name {
  margin: 1rem 0 0;
  color: var(--bright);
  font-size: 0.9375rem;
}

/* The room: a framed photo of the auditorium beside its specs. */
.room-layout { display: grid; gap: 0.75rem; margin-top: 1rem; }

.room-photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  background: var(--panel);
}

.room-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 0;
}

.specs div {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: var(--panel);
}

.specs dt {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
}

.specs dd {
  margin: 0.125rem 0 0;
  color: var(--white);
  font-weight: 600;
}

/* Letterboxd: personal pills are green, so they never read as a format or event. */
.tags.personal { margin-top: 0.375rem; }

.card-mark {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 999px;
  background: rgba(20, 24, 28, 0.85);
  color: #6fd3a4;
}

.card-mark .icon { color: inherit; }
.chip-personal { color: #6fd3a4; }
.rail-personal .rail-head h2 a { color: #6fd3a4; }

/* Theatre page folds: Tickets and Tech specs, closed until tapped. */
.folds { display: grid; gap: 0.5rem; margin-top: 1.5rem; }
/* Grid items default to their content's width; the room cards inside would push the page wide. */
.folds > * { min-width: 0; }

.fold {
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  background: var(--panel);
}

.fold summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  color: var(--white);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.fold summary::-webkit-details-marker { display: none; }
.fold summary > .icon:first-child { color: var(--accent-text); }
.fold-hint { margin-left: auto; color: var(--text); font-size: 0.8125rem; font-weight: 500; }
.fold summary > .icon:last-child { color: var(--text); transition: transform 150ms; }
.fold[open] summary > .icon:last-child { transform: rotate(90deg); }
.fold-body { padding: 0 1rem 1rem; }
.fold-subhead { margin: 0.5rem 0 0.25rem; color: var(--text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fold-note { margin-top: 0.75rem; }
.fold-columns { margin: 0 0 0.25rem; text-align: right; }
.fold .links { margin-top: 0.75rem; }
.fold .room-swipe { margin-top: 0.25rem; }
.fold .room-name:first-child, .fold .room-layout { margin-top: 0; }

.price-list { margin: 0; }
.price-list div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--panel-line);
}
.price-list div:last-child { border-bottom: 0; }
.price-list dt { color: var(--bright); }
.price-list dt small { display: block; color: var(--text); font-size: 0.75rem; }
.price-list dd { margin: 0; color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A film page's link to the theatre's own page for it, under that theatre's times. */
.run-more { margin: 0.875rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--panel-line); }
.run-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--accent-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.run-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Your Letterboxd: one username box, then your films. */
.me-form { display: flex; gap: 0.5rem; max-width: 30rem; margin-top: 1rem; }
.me-form input {
  width: 100%;
  padding: 0.625rem 0.75rem 0.625rem 3rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--raised);
  color: var(--white);
  font: inherit;
}
.me-form input:focus { border-color: var(--accent); outline: none; }
.me-form .source-logo { position: absolute; top: 50%; left: 0.75rem; height: 0.75rem; transform: translateY(-50%); }
.me-form + .filter-status a { color: var(--accent-text); }

.me-button {
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--white);
  font: 600 0.875rem var(--sans);
  cursor: pointer;
}

.me-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  background: var(--panel);
}

.me-status { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--bright); }
.me-status b { color: var(--white); }
.me-status .source-logo { height: 0.75rem; }
#me-disconnect { margin: 0; }
.me-page .rail-head h2 a { display: inline-flex; align-items: center; gap: 0.5rem; }
.me-page .rail-head .icon { color: #6fd3a4; }
.me-page .film-grid { margin-top: 0.75rem; }

/* 10. Wider screens */

/* Tighter booking buttons on phones, so three fit across. */
@media (max-width: 30rem) {
  .times { gap: 0.375rem; }
  .time { gap: 0.3125rem; padding: 0.25rem 0.625rem 0.25rem 0.5rem; font-size: 0.875rem; }
}

@media (min-width: 40rem) {
  :root { --gutter: 1.5rem; }
  .row { grid-template-columns: 7rem 1fr; gap: 1.25rem; }
  .film-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1.5rem 1rem; }
  .rail-cards { grid-auto-columns: 8.5rem; gap: 1rem; }
  .spotlight { height: 20rem; }
  .spotlight-body { right: 1.75rem; bottom: 1.5rem; left: 1.75rem; }
  .spotlight-title { font-size: 2.5rem; }
  .backdrop { height: 22rem; }
  .film-head { grid-template-columns: 10rem 1fr; gap: 0.75rem 1.5rem; }
  .film-head > .poster,
  .film-head > .poster-zoom { grid-row: 1 / span 2; align-self: end; }
  .film-details { grid-column: 2; align-self: start; }
  .has-backdrop .film-head { margin-top: -7rem; }
  .film-title { font-size: 3rem; }
  .theatre-cards { grid-template-columns: repeat(2, 1fr); }
  .theatre-hero { height: 26rem; }
  .over-hero .theatre-full-logo { width: calc(var(--w) * 1.25); }
  .specs { grid-template-columns: repeat(3, 1fr); }

  /* Specs stretch to the room photo's height, so nothing floats. */
  .room-swipe { grid-auto-columns: calc(50% - 0.375rem); }
  .room-single .room-layout.has-photo { grid-template-columns: 3fr 2fr; align-items: stretch; }
  .room-single .room-layout.has-photo .specs { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
  .room-single .room-layout.has-photo .specs div { display: flex; flex-direction: column; justify-content: center; }
  .room-single .room-layout.has-photo .specs dd { font-size: 1.125rem; }
}

@media (min-width: 64rem) {
  .rail-cards { grid-auto-columns: 9.5rem; }
  .film-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
  .spotlight { height: 24rem; }
  .theatre-cards { grid-template-columns: repeat(3, 1fr); }
  .day-bar { margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; }

  /* The theatre photo fills the right side and fades left into the page, so
     tall signs stay whole instead of being cropped to a strip. */
  .theatre-hero { background: var(--bg); }
  .theatre-hero img { display: block; width: 62%; margin-left: auto; }
  .theatre-hero::after {
    background: linear-gradient(to right, var(--bg) 38%, rgba(20, 24, 28, 0) 60%),
      linear-gradient(to bottom, rgba(20, 24, 28, 0) 55%, var(--bg));
  }
  .theatre-head.over-hero { margin-top: -15rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .time,
  .links a,
  .date-strip a { transition: background-color 120ms, border-color 120ms, color 120ms; }
}