/* Dark, cover-first layout: the box art does most of the talking. */

:root {
  --bg: #0f1012;
  --surface: #181a1e;
  --surface-raised: #20232a;
  --border: #2c3039;
  --text: #ecedf0;
  --header: #eb004f;
  --header-band: #940035;
  --muted: #9aa0ab;
  --accent: #fff;
  --accent-ink: #0f1012;
  --good: #57c48a;
  --warn: #f0a04b;
  --bad: #e5646a;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* The space at the sides of the header, the page and the footer, so all
     three line up. Phones change it to the menu's (below). */
  --gutter-left: 24px;
  --gutter-right: 24px;
  --page-width: 1280px;

  color-scheme: dark;
}

/* The header's pink is #D70852 in Display P3, the wider range of colors that
   phones and Macs show, and more vivid than the web's usual #D70852. Screens
   that can't show it get #eb004f, the nearest they can. */
@supports (color: color(display-p3 0 0 0)) {
  :root {
    --header: color(display-p3 0.843 0.031 0.322);
    --header-band: color(display-p3 0.529 0.02 0.204);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Form controls take the page's font, and are square like everything else
   on the site. Browsers don't do either unless asked; iPhones round them. */
button, input, select, textarea {
  border-radius: 0;
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent);
}

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

h1, h2, h3 {
  line-height: 1.2;
  margin: 0;
}

/* Headlines and section titles are set tight. */
h1, h2 {
  letter-spacing: -0.03em;
}

/* Header and footer */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 12px var(--gutter-right) 12px var(--gutter-left);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.brand__logo {
  display: block;
  width: auto;
  height: 28px;
}

.site-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Helvetica Neue Bold, white; the page you're on is underlined. */
.site-nav__link {
  padding: 6px 10px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  text-decoration-color: #fff;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.site-nav__link.is-active {
  text-decoration-line: underline;
}

@media (hover: hover) {
  .site-nav__link:hover {
    color: #fff;
    text-decoration-line: underline;
  }

  .site-nav__link:not(.is-active):hover {
    text-decoration-color: rgb(255 255 255 / 0.5);
  }
}

/* Movies: a menu of the catalog's views. */
.nav-menu {
  position: relative;
}

.nav-menu__toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  list-style: none;
  cursor: pointer;
}

.nav-menu__toggle::-webkit-details-marker {
  display: none;
}

.nav-menu__toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.nav-menu[open] .nav-menu__toggle::after {
  transform: translateY(2px) rotate(225deg);
}

.nav-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  display: grid;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
}

.nav-menu__link {
  padding: 8px 12px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.nav-menu__link:hover {
  background: var(--surface-raised);
}

.nav-menu__link.is-active {
  color: var(--accent-ink);
  background: var(--accent);
}

.nav-menu__divider {
  width: 100%;
  margin: 6px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* The menu keeps its width, so it stays on one line, and the search box
   gives some up instead. (The admin's longer menu may still wrap.) */
.site-header:not(.site-header--admin) .site-nav {
  flex-shrink: 0;
}

.site-search {
  position: relative;
  flex: 0 1 220px;
  min-width: 160px;
  margin-left: auto;
}

input[type="search"], select {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

/* The header's search box looks the same on every screen: a white outline
   around the darker band's color, lightened, as on phones (where the band
   runs behind it). */
.site-search input {
  width: 100%;
  border: 1px solid #fff;
  background: linear-gradient(rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.2)) var(--header-band);
  color: #fff;
  caret-color: #fff;
  padding-right: 34px;
  text-overflow: ellipsis;
  appearance: none;
}

/* A magnifying glass at the end of the box. Phones have theirs in the menu. */
.site-search__button {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: grid;
  place-items: center;
  width: 33px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

.site-search input::placeholder {
  color: #fff;
  opacity: 1;
}

.site-search input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px #fff;
}

.site-search-toggle {
  display: none;
}

.site-footer {
  max-width: var(--page-width);
  margin: 48px auto 0;
  padding: 24px var(--gutter-right) 24px var(--gutter-left);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}

.site-footer__tmdb-logo {
  height: 10px;
  margin-right: 6px;
  vertical-align: baseline;
}

.site-footer__credit {
  margin-bottom: 0;
  color: var(--text);
}

.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 24px var(--gutter-right) 24px var(--gutter-left);
}

/* Home */

.hero {
  padding: 32px 0 8px;
}

/* As big on phones as on laptops: 40px, or less where the screen is too
   narrow for its words, in balanced lines. */
.hero h1 {
  font-size: clamp(32px, 9vw, 40px);
  text-wrap: balance;
}

.hero h1 .nowrap {
  white-space: nowrap;
}

.hero p {
  max-width: 60ch;
  color: var(--muted);
  font-size: 17px;
}

.shelf {
  margin-top: 40px;
}

.shelf__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

/* A sale's title is the size of the home page's other section titles, and as
   tight, even as an h3 under the Sales page's "Ended". */
.shelf__header h2, .sale-promo__title {
  font-size: 22px;
  letter-spacing: -0.03em;
}

.shelf__header h2 a {
  text-decoration: none;
}

.shelf__header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.shelf__more {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Listing pages */

.listing-header h1 {
  font-size: 30px;
}

.listing-header p {
  margin: 6px 0 0;
  color: var(--muted);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 20px 0 8px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.filters__search {
  flex: 1 1 200px;
}

.filters select {
  max-width: 220px;
}

.filters__check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.filters__clear {
  color: var(--muted);
  font-size: 13px;
}

.button {
  display: inline-block;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  line-height: 34px;
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  height: 44px;
  padding: 0 20px;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  line-height: 42px;
}

/* The hidden attribute wins over the display that classes like .button set. */
[hidden] {
  display: none !important;
}

.button--ebay {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: #fff;
  background: #fff;
  color: #16181d;
}

.button--ebay:hover {
  color: #16181d;
  filter: brightness(0.94);
}

.button__logo {
  display: block;
  width: auto;
  height: 20px;
}

/* With .product__details' 14px gap, 60px between the buttons and what follows. */
.product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 46px;
}

.button--primary:hover {
  color: var(--accent-ink);
  filter: brightness(0.92);
}

.result-count {
  color: var(--muted);
  font-size: 13px;
}

.empty {
  padding: 32px;
  border: 1px dashed var(--border);
  color: var(--muted);
  text-align: center;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  color: var(--muted);
}

.pagination a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

/* Product cards */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

/* One row of six on the home page. */
.grid--shelf {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .grid--shelf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .grid, .grid--shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* Too narrow for the logo, the menu and a search box on one line (an iPad
   is 768–834px wide): the search box gets a line of its own. */
@media (max-width: 880px) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: 12px;
  }

  .site-search {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* On phones (an iPhone Pro Max is 440px wide) the header follows the owner's
   mockup, sized to the screen's width (vw) the way the logo is. The logo runs
   edge to edge, flush with the top, and scrolls away; the menu under it stays
   at the top, with a magnifying glass that slides the search box out below on
   a darker band. The admin's header keeps its usual layout. */
@media (max-width: 440px) {
  /* Pages and the footer line up with the menu: on the left with "Movies",
     on the right with the magnifying glass. */
  body:not(.admin) {
    --gutter-left: 2.6vw;
    --gutter-right: 2.286vw;
  }

  .site-header:not(.site-header--admin) {
    top: -16vw; /* the logo, 12.64vw tall, and some of the space under it */
  }

  .site-header:not(.site-header--admin) .site-header__inner {
    gap: 0;
    padding: 0;
  }

  .site-header:not(.site-header--admin) .brand {
    width: 100%;
  }

  .site-header:not(.site-header--admin) .brand__logo {
    width: 100%;
    height: auto;
  }

  .site-header:not(.site-header--admin) .site-nav {
    gap: 5vw;
    padding: 0 0 4.15vw 2.3vw;
  }

  .site-header:not(.site-header--admin) .site-nav__link {
    padding: 5.57vw 0 0;
    font-size: 4.34vw;
    line-height: 1;
    text-decoration-thickness: 1.47vw;
    text-underline-offset: 1.52vw;
  }

  .site-header:not(.site-header--admin) .nav-menu__toggle {
    gap: 2.05vw;
  }

  /* "Find Local Shops" is just "Shops", so Screenings fits beside it. */
  .site-nav__more {
    display: none;
  }

  .site-header:not(.site-header--admin) .nav-menu__toggle::after {
    width: 1.93vw;
    height: 1.93vw;
    border-width: 0 0.58vw 0.58vw 0;
  }

  .site-search-toggle {
    display: grid;
    place-items: center;
    width: 9.5vw;
    height: 11vw;
    margin: 2.1vw 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
  }

  .site-search-toggle svg {
    width: 4.93vw;
    height: 4.93vw;
  }

  .site-search {
    padding: 0.75vw 0.63vw;
    background: var(--header-band);
  }

  .site-search__button {
    display: none;
  }

  .site-search input {
    display: block;
    height: 9.76vw;
    padding: 0 2.26vw;
    /* Any smaller than 16px and Safari zooms into the page when it's tapped. */
    font-size: max(16px, 4.3vw);
    line-height: 1;
  }

  .site-header.is-collapsible .site-search {
    max-height: 0;
    padding-block: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.2s ease, padding 0.2s ease, visibility 0s 0.2s;
  }

  .site-header.is-collapsible.is-searching .site-search {
    max-height: 20vw;
    padding-block: 0.75vw;
    visibility: visible;
    transition: max-height 0.2s ease, padding 0.2s ease;
  }
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  overflow: hidden;
  transition: transform 120ms ease, background 120ms ease;
}

.card:hover {
  transform: translateY(-2px);
  background: var(--surface-raised);
}

.card__cover {
  display: block;
  aspect-ratio: 3 / 4;
  background: #0b0c0e;
}

.cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cover--blank {
  display: grid;
  place-items: center;
  color: var(--border);
  font-size: 64px;
  font-weight: 800;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}

.card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.card__title {
  font-size: 15px;
  font-weight: 650;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__title a {
  text-decoration: none;
}

.card__meta {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.card__meta span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wraps: a release several stores sell names them all. */
.card__meta .card__store {
  white-space: normal;
  font-size: 12px;
  opacity: 0.8;
}

.card__price {
  margin: 0;
  font-weight: 700;
}

.card__note {
  margin: 0;
  color: var(--good);
  font-size: 13px;
  font-weight: 600;
}

/* A hand-picked list's note on a card. */
.card__pick-note {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
  color: var(--text);
  font-size: 13px;
  font-style: italic;
  line-height: 1.45;
}

.card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.card__badges:empty {
  display: none;
}

/* A badge too long for its card ends in an ellipsis; its full text is on hover. */
.card__badges .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Format chips and status badges */

.chip, .badge {
  display: inline-block;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.chip {
  border: 1px solid var(--border);
  color: var(--muted);
}

.chip--4k-uhd {
  border-color: #6d5a2a;
  color: #f2cf74;
}

.chip--blu-ray {
  border-color: #2b4f7a;
  color: #7fb3f0;
}

.chip--vhs {
  border-color: #6b3a3d;
  color: #f08b90;
}

.chip--vinyl, .chip--cd, .chip--cassette, .chip--laserdisc {
  border-color: #4d3b6b;
  color: #c3a4f2;
}

.badge--preorder {
  background: #22344d;
  color: #9cc7fa;
}

.badge--scarce {
  background: #4a2f12;
  color: var(--warn);
}

.badge--partial {
  background: #2c2f36;
  color: var(--muted);
}

.badge--soldout {
  background: #3d1d20;
  color: var(--bad);
}

/* Product page */

.product {
  display: grid;
  grid-template-columns: minmax(240px, 420px) 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 800px) {
  .product {
    grid-template-columns: 1fr;
  }
}

/* A hand-entered release's price, which the admin gave it. */
.product__price {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.product__was {
  margin-left: 6px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  text-decoration: line-through;
}

.product__cover {
  background: #0b0c0e;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.product__details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: start;
}

.product__details h1 {
  font-size: clamp(24px, 3vw, 34px);
}

.product__meta, .product__notes {
  margin: 0;
  color: var(--muted);
}

/* A film's versions, one tile each: its formats, what sets it apart, its
   price. The one on show is outlined in white. */
.versions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  align-self: stretch;
}

.version {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
}

.version:hover {
  border-color: var(--muted);
  color: inherit;
}

.version.is-current {
  border-color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
}

.version__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.version__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.version__price {
  color: var(--muted);
  font-size: 13px;
}

.editions {
  width: 100%;
  border-collapse: collapse;
}

.editions caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: 6px;
}

.editions th, .editions td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.editions th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.editions .is-sold-out td {
  color: var(--muted);
}

.editions .is-sold-out td:last-child {
  color: var(--bad);
}

.elsewhere, .history, .description {
  width: 100%;
}

.elsewhere h2, .history h2, .description h2 {
  font-size: 16px;
  margin-bottom: 6px;
}

/* 60px above the history, with .product__details' gap, as below the buttons. */
.history {
  margin-top: 46px;
}

.elsewhere ul {
  margin: 0;
  padding-left: 18px;
}

/* A store's description: its own headings and spacing toned down to fit the page. */
.description__body {
  color: var(--muted);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.description__body :is(h1, h2, h3, h4, h5, h6) {
  margin: 16px 0 6px;
  color: var(--text);
  font-size: 15px;
}

.description__body :is(p, ul, ol, blockquote, table) {
  margin: 0 0 10px;
}

.description__body :is(ul, ol) {
  padding-left: 20px;
}

.description__body :is(strong, b) {
  color: var(--text);
}

.description__body a {
  color: var(--text);
}

.description__body table {
  border-collapse: collapse;
}

.description__body :is(th, td) {
  padding: 2px 10px 2px 0;
  text-align: left;
  vertical-align: top;
}

.description__body hr {
  border: 0;
  border-top: 1px solid var(--border);
}

.description__body.is-folded {
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 65%, transparent);
}

.description__more {
  margin-top: 8px;
}

.description__source {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

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

.history li {
  color: var(--muted);
}

.history time {
  color: var(--text);
  margin-right: 6px;
}

/* Labels */

.labels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.labels__item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 12px 14px;
  background: var(--surface);
  text-decoration: none;
}

.labels__item:hover {
  color: inherit;
  background: var(--surface-raised);
}

.labels__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.labels__name {
  font-weight: 650;
}

.labels__count {
  font-size: 13px;
}

.labels__stores {
  color: var(--muted);
  font-size: 12px;
}

.label-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  overflow: hidden;
}

.label-icon--dark {
  background: #f4f4f5;
}

.label-icon--light {
  background: #0b0c0e;
  border: 1px solid var(--border);
}

.label-icon__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.label-icon--monogram {
  background: hsl(var(--hue) 45% 32%);
  color: hsl(var(--hue) 70% 88%);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.label-header {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.label-header h1 {
  font-size: 30px;
}

.label-header p {
  margin: 6px 0 0;
  color: var(--muted);
}

/* A label's or a store's logo on a tile. Its one column is the tile's width
   inside the padding, so a long logo shrinks to fit a phone instead of running
   off the tile. */
.label-logo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-width: 220px;
  max-width: 100%;
  min-height: 120px;
  padding: 20px 28px;
}

.label-logo img {
  max-width: min(420px, 100%);
  max-height: 110px;
  width: auto;
  height: auto;
}

.label-logo--on-light {
  background: #f4f4f5;
}

.label-logo--on-dark,
.label-logo--icon {
  background: #0b0c0e;
  border: 1px solid var(--border);
}

.label-logo--icon .label-icon {
  width: 96px;
  height: 96px;
}

.label-logo--wordmark {
  background: var(--surface);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.label-views {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}


.label-views__link {
  padding: 6px 10px;
  color: var(--muted);
  text-decoration: none;
}

.label-views__link.is-active {
  color: var(--accent-ink);
  background: var(--accent);
}

.card__label {
  text-decoration: none;
}

/* Sales */

/* A small card for each sale, with a few of its covers: three across on wide
   screens, in a row on the home page and in a grid on the Sales page. */
.sale-promos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

/* The home page's row scrolls sideways when there are more sales than fit, a
   card at a time. On a side with more to see, the outer half of the last card
   showing fades out, and a thin arrow at the edge moves the row a card. The
   script marks those sides as the row scrolls (has-before, has-after). */
@property --fade-before {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}

@property --fade-after {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}

.sale-carousel {
  --across: 3;
  --gap: 20px;
  --card: calc((100% - (var(--across) - 1) * var(--gap)) / var(--across));
  position: relative;
  margin-top: 40px;
  transition: --fade-before 0.3s, --fade-after 0.3s;
}

.sale-carousel.has-before {
  --fade-before: calc(var(--card) / 2);
}

/* Until the script has measured it (and without one), the row is at its
   start, with more to see when there are more sales than fit. */
.sale-carousel.has-after,
.sale-carousel:not(.is-measured):has(.sale-promo:nth-child(4)) {
  --fade-after: calc(var(--card) / 2);
}

.sale-carousel__track {
  display: grid;
  grid-auto-columns: var(--card);
  grid-auto-flow: column;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Eased, so the fades melt away at the edge, where the arrows are. */
  mask-image: linear-gradient(to right,
    transparent, rgb(0 0 0 / 0.1) calc(var(--fade-before) * 0.2), rgb(0 0 0 / 0.5) calc(var(--fade-before) * 0.5),
    rgb(0 0 0 / 0.9) calc(var(--fade-before) * 0.8), #000 var(--fade-before),
    #000 calc(100% - var(--fade-after)), rgb(0 0 0 / 0.9) calc(100% - var(--fade-after) * 0.8),
    rgb(0 0 0 / 0.5) calc(100% - var(--fade-after) * 0.5), rgb(0 0 0 / 0.1) calc(100% - var(--fade-after) * 0.2), transparent);
}

.sale-carousel__track::-webkit-scrollbar {
  display: none;
}

.sale-carousel__track > * {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.sale-carousel__arrow {
  position: absolute;
  top: 50%;
  display: grid;
  align-items: center;
  width: 44px;
  height: 96px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: opacity 0.3s, visibility 0.3s;
}

.sale-carousel__arrow--previous {
  left: 0;
  justify-items: start;
}

.sale-carousel__arrow--next {
  right: 0;
  justify-items: end;
}

.sale-carousel.has-before .sale-carousel__arrow--previous,
.sale-carousel.has-after .sale-carousel__arrow--next {
  opacity: 1;
  visibility: visible;
}

.sale-carousel__arrow svg {
  transition: transform 0.2s;
}

@media (hover: hover) {
  .sale-carousel__arrow--previous:hover svg {
    transform: translateX(-3px);
  }

  .sale-carousel__arrow--next:hover svg {
    transform: translateX(3px);
  }
}

.sale-promo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid #1d6b78;
  background: linear-gradient(180deg, #0c2a31, transparent 70%);
}

.sale-promo__covers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 4px;
}

.sale-promo__cover {
  aspect-ratio: 3 / 4;
  background: #0b0c0e;
  overflow: hidden;
}

.sale-promo__cover .cover--blank {
  font-size: 24px;
}

.sale-promo__title a {
  text-decoration: none;
}

.sale-promo__summary {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
}

/* At the bottom, so the buttons of a row line up. */
.sale-promo__action {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 1023px) {
  .sale-promos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sale-carousel {
    --across: 2;
  }

  .sale-carousel:not(.is-measured):has(.sale-promo:nth-child(3)) {
    --fade-after: calc(var(--card) / 2);
  }
}

/* Phones show a sale at a time, lined up with the page's margins, with the
   next one peeking in from the edge of the screen. A swipe moves one sale. */
@media (max-width: 640px) {
  .sale-promos {
    grid-template-columns: minmax(0, 1fr);
  }

  .sale-carousel {
    --gap: 12px;
  }

  .sale-carousel__track {
    grid-auto-columns: calc(100% - 16px - var(--gap));
    margin: 0 calc(-1 * var(--gutter-right)) 0 calc(-1 * var(--gutter-left));
    padding: 0 var(--gutter-right) 0 var(--gutter-left);
    scroll-padding: 0 var(--gutter-right) 0 var(--gutter-left);
    mask-image: none;
  }

  .sale-carousel__track:has(> :only-child) {
    grid-auto-columns: 100%;
  }

  .sale-carousel__arrow {
    display: none;
  }
}

.shelf__eyebrow {
  margin: 0 0 4px;
  color: var(--bad);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The Sales page: the sales that have ended under a heading of their own, dimmed. */
.sales-ended {
  margin-top: 48px;
  font-size: 22px;
}

.sale-promo--ended {
  border-color: var(--border);
  background: none;
}

.sale-promo--ended .sale-promo__cover {
  opacity: 0.6;
}

/* The video store directory (/video-stores). */
.back-link {
  margin: 0 0 16px;
  font-size: 14px;
}

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

.back-link a:hover {
  color: var(--text);
}

/* Find Local Shops: line art of two ghouls, with the search in a box and the
   kinds of shop under it, after the owner's mockups. Wide screens put them
   between the ghouls, 38% of the way down; narrow ones get a taller drawing,
   at least its own 560px wide and cut off at the sides, with the box over
   their shoulders. The drawing's top tucks behind the header, and its lines
   stay a pixel thick at any size. */
.shops-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* The page's padding, and 2.54% of the drawing's width (at most 888px) behind the header. */
  margin-top: calc(-24px - min(22.5px, 2.54%));
}

.shops-hero > * {
  grid-area: 1 / 1;
}

.shops-hero__art img {
  display: block;
  width: min(100%, 888px);
  height: auto;
  margin: 0 auto;
}

/* 13.8% of the drawing's width is 38% of its height. */
.shops-hero__panel {
  justify-self: center;
  width: 368px;
  margin-top: min(13.8%, 122px);
}

.shops-hero__box {
  padding: 5px 9px 10px;
  border: 1px solid #fff;
  background: var(--bg);
}

.shops-hero__title {
  margin-bottom: 19px;
  color: #fff;
  font: 700 36px/35px var(--font);
  letter-spacing: -2px;
}

.shops-hero__search {
  position: relative;
}

.shops-hero__search input[type="search"] {
  width: 100%;
  height: 38px;
  padding: 0 36px 0 8px;
  border: 1px solid #fff;
  background: none;
  color: #fff;
  caret-color: #fff;
  font: 17px var(--font);
  text-overflow: ellipsis;
  appearance: none;
}

.shops-hero__search input::placeholder {
  color: #fff;
  opacity: 1;
}

.shops-hero__search input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px #fff;
}

.shops-hero__button {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: grid;
  place-items: center;
  width: 35px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

/* All shops, or the ones that sell or rent movies: the one showing is white. */
.store-kinds {
  display: flex;
  gap: 3px;
  width: fit-content;
  margin: 31px auto 0;
  background: var(--bg); /* over the drawing's lines */
}

.store-kinds__link {
  padding: 8.5px 13px;
  color: #fff;
  font: 700 13.5px/1.2 var(--font);
  letter-spacing: -0.6px;
  text-decoration: none;
}

.store-kinds__link:hover {
  color: #fff;
  text-decoration: underline;
}

.store-kinds__link.is-active {
  background: #fff;
  color: #000;
  text-decoration: none;
}

/* Suggesting a shop: in the top right corner on wide screens, and a bug
   floating in the bottom right corner on narrow ones. */
.shops-suggest {
  z-index: 1;
  justify-self: end;
  align-self: start;
  margin-top: 38px; /* 16px below the header */
  padding: 12px 15px;
  background: #5c0e2a;
  color: #fff;
  font: 700 13px/1.3 var(--font);
  letter-spacing: -0.6px;
  text-decoration: none;
  white-space: nowrap;
}

.shops-suggest:hover {
  color: #fff;
  background: #741237;
}

@media (max-width: 760px) {
  .shops-hero {
    margin-inline: calc(-1 * var(--gutter-left)) calc(-1 * var(--gutter-right)); /* edge to edge */
    margin-top: calc(-24px - max(560px, 100vw) * 0.048);
  }

  .shops-hero__art {
    display: flex;
    justify-content: center;
    overflow: clip;
  }

  .shops-hero__art img {
    flex: none;
    width: max(560px, 100%);
    margin: 0;
  }

  /* Over the ghouls' shoulders: the drawing's bottom 22%. */
  .shops-hero__panel {
    grid-area: 2 / 1;
    width: min(368px, 100% - 16px);
    margin-top: calc(max(560px, 100vw) * -0.22);
  }
}

/* Narrower than this, the top right corner is the drawing's: the button
   floats in the bottom right instead. */
@media (max-width: 1023px) {
  .shops-suggest {
    position: fixed;
    right: 8px;
    bottom: 8px;
    z-index: 15;
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.5);
  }

  /* Room to scroll the footer's last line clear of it. */
  body:has(.shops-suggest) .site-footer {
    padding-bottom: 64px;
  }
}

/* On phones the search box and the button to suggest a shop line up with the
   menu, like the rest of the page. */
@media (max-width: 440px) {
  .shops-hero__panel {
    justify-self: stretch;
    width: auto;
    margin-inline: var(--gutter-left) var(--gutter-right);
  }

  .shops-suggest {
    right: var(--gutter-right);
  }
}

.store-search__note {
  margin: 16px 0 0;
  color: var(--muted);
}

.store-state {
  margin-top: 36px;
  scroll-margin-top: 80px;
}

.store-state h2 {
  font-size: 20px;
}

/* The directory's stores, three across on a wide screen: a big square icon
   beside the name, place, what it sells or rents, today's hours and
   directions, after the owner's mockup (scaled to 87% so three fit). */
.store-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.store-card {
  position: relative;
  container-type: inline-size;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  background: #1a1a1a;
  color: #fff;
}

.store-card:hover {
  background: #242424;
}

.store-card:has(.store-card__link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.store-card .label-icon {
  width: 110px;
  height: 110px;
}

.store-card .label-icon--monogram {
  font-size: 34px;
}

.store-card__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.store-card__name {
  font-size: 22px;
  overflow-wrap: anywhere;
}

/* The name's link covers the whole card. */
.store-card__link {
  text-decoration: none;
}

.store-card__link:hover {
  color: inherit;
}

.store-card__link:focus-visible {
  outline: none;
}

.store-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.store-card__place {
  font-size: 16px;
  line-height: 1.1;
}

.store-card__kind {
  color: #808080;
  font-size: 14px;
  line-height: 1.2;
}

.store-card__visit {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.2;
}

/* The maps stay together; on a narrow card they go under "Directions:". */
.store-card__maps {
  white-space: nowrap;
}

/* Above the name's link, so they open the maps. */
.store-card__maps a {
  position: relative;
  z-index: 1;
  text-decoration-color: currentColor;
}

/* A narrow card, as on phones: the mockup's card at 81%, and "Apple •
   Google" for short. (Under 364px inside, the full-size directions don't fit.) */
@container (max-width: 363px) {
  .store-card .label-icon {
    width: 102.5px;
    height: 102.5px;
  }

  .store-card__name {
    font-size: 20px;
  }

  .store-card__place {
    font-size: 15px;
  }

  .store-card__kind,
  .store-card__visit {
    font-size: 13px;
  }

  .store-card__visit {
    margin-top: 11.5px;
  }

  .store-card__maps-word {
    display: none;
  }
}

.video-store {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.3fr);
  gap: 32px;
  align-items: start;
  margin-top: 8px;
}

.video-store__details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 14px 20px;
  margin: 0;
}

.video-store__details dt {
  padding-top: 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.video-store__details dd {
  margin: 0;
  line-height: 1.5;
}

.video-store__hours {
  border-collapse: collapse;
}

.video-store__hours th {
  padding: 0 16px 4px 0;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
}

.video-store__hours td {
  padding: 0 0 4px;
}

.video-store__note,
.video-store__unknown {
  color: var(--muted);
}

.video-store__note {
  margin: 6px 0 0;
  font-size: 14px;
}

.video-store__photo {
  margin: 0;
}

.video-store__photo img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
}

.store-corrections {
  margin-top: 48px;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 760px) {
  .video-store {
    grid-template-columns: 1fr;
  }
}

/* Screenings (/screenings): independent theaters by state, and what each is
   playing, with links to buy tickets. */
.screenings-hero {
  padding: 24px 0 8px;
}

.screenings-hero h1 {
  font-size: clamp(32px, 9vw, 40px);
}

.screenings-hero p {
  max-width: 60ch;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 17px;
}

/* The same square white box as Find Local Shops' search. */
.screenings-search {
  position: relative;
  max-width: 420px;
  margin-top: 20px;
}

.screenings-search input[type="search"] {
  width: 100%;
  height: 42px;
  padding: 0 40px 0 10px;
  border: 1px solid #fff;
  background: none;
  color: #fff;
  caret-color: #fff;
  font: 17px var(--font);
  text-overflow: ellipsis;
  appearance: none;
}

.screenings-search input::placeholder {
  color: #fff;
  opacity: 1;
}

.screenings-search input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px #fff;
}

.screenings-search__button {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: grid;
  place-items: center;
  width: 39px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

/* The states with theaters: a tile each, several across. */
.state-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.state-tile {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
}

.state-tile:hover {
  background: #242424;
  color: #fff;
}

.state-tile__name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.state-tile__count {
  color: #808080;
  font-size: 14px;
}

/* A theater, with its next few screenings; the whole card opens its page. */
.theater-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.theater-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
  background: #1a1a1a;
  color: #fff;
}

.theater-card:hover {
  background: #242424;
}

.theater-card:has(.theater-card__link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theater-card__name {
  font-size: 22px;
  overflow-wrap: anywhere;
}

.theater-card__link {
  text-decoration: none;
}

.theater-card__link:hover {
  color: inherit;
}

.theater-card__link:focus-visible {
  outline: none;
}

.theater-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.theater-card__place {
  color: #808080;
  font-size: 14px;
  line-height: 1.3;
}

.theater-card__next {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #2e2e2e;
  list-style: none;
  font-size: 14px;
  line-height: 1.3;
}

.theater-card__when {
  display: block;
  color: #808080;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.theater-card__none {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid #2e2e2e;
  color: #808080;
  font-size: 14px;
}

/* A theater's page: what's playing, day by day, beside how to get there. */
.listing-header .theater-header__about {
  max-width: 70ch;
  margin-top: 10px;
  color: var(--text);
}

.theater {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 40px;
  align-items: start;
  margin-top: 28px;
}

.theater__schedule h2 {
  font-size: 22px;
}

.screening-day {
  margin-top: 22px;
}

.screening-day__date {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.screening {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #222;
}

.screening__poster {
  flex: none;
  width: 64px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--surface);
}

.screening__text {
  min-width: 0;
}

.screening__title {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.screening__title a {
  text-decoration: none;
}

.screening__details {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.screening__times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* A showtime: square, outlined in white, opening the theater's ticket page. */
.screening__time {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

a.screening__time:hover {
  background: #fff;
  color: #000;
}

.screening__tickets,
.screening__sold-out {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.screening__time--sold-out {
  border-color: var(--border);
  color: var(--muted);
}

.theater__source {
  margin-top: 20px;
  color: var(--muted);
  font-size: 13px;
}

.theater__elsewhere {
  margin-top: 16px;
}

@media (max-width: 760px) {
  .theater {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* How to get there comes first on phones, above the long schedule. */
  .theater__about {
    order: -1;
  }
}

/* Suggesting a video store: a small window on the directory, or its own page. */
.suggest-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.suggest-dialog::backdrop {
  background: rgb(0 0 0 / 0.65);
}

.suggest-dialog__inner {
  padding: 20px 24px 24px;
}

.suggest-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.suggest-dialog__header h2 {
  font-size: 20px;
}

.suggest-dialog__close {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.suggest-dialog__close:hover {
  color: var(--text);
}

.suggest-page {
  max-width: 560px;
}

.suggest-form {
  display: grid;
  gap: 14px;
}

.suggest-form__intro,
.suggest-form__disclaimer,
.suggest-form__loading {
  margin: 0;
  color: var(--muted);
}

.suggest-form__disclaimer {
  font-size: 13px;
}

.suggest-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.suggest-form__field {
  display: grid;
  gap: 6px;
}

.suggest-form__field label {
  font-size: 14px;
  font-weight: 600;
}

.suggest-form input[type="text"],
.suggest-form input[type="tel"],
.suggest-form select,
.suggest-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.suggest-form select {
  height: 38px;
  padding: 0 12px;
}

.suggest-form textarea {
  resize: vertical;
}

.suggest-form__errors {
  padding: 10px 14px;
  border: 1px solid #6b2b30;
  background: #2a1416;
}

.suggest-form__errors p,
.suggest-form__errors ul {
  margin: 0;
}

.suggest-form__errors ul {
  padding-left: 18px;
}

/* For bots only. */
.suggest-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.suggest-form .button--primary {
  justify-self: start;
}

/* Signing in (/sign-in) and the profile it leads to (/profile). */
.account-page {
  max-width: 420px;
}

.account-page .listing-header {
  margin-bottom: 20px;
}

.account-form {
  display: grid;
  gap: 14px;
}

.account-form__field {
  display: grid;
  gap: 6px;
}

.account-form__field label {
  font-size: 14px;
  font-weight: 600;
}

.account-form input[type="email"],
.account-form input[type="password"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* any smaller, and iPhones zoom in on it */
}

.account-form__alert {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #6b2b30;
  background: #2a1416;
}

.account-form .button--primary {
  justify-self: start;
}

.profile-section {
  margin-top: 32px;
}

.profile-section h2 {
  font-size: 22px;
}

.profile-section p {
  margin: 6px 0 16px;
  color: var(--muted);
}

.profile-sign-out {
  margin-top: 48px;
}

.suggest-thanks h2 {
  font-size: 20px;
}

.suggest-thanks p {
  color: var(--muted);
}

@media (max-width: 560px) {
  .suggest-form__row {
    grid-template-columns: 1fr;
  }
}

/* A hand-entered release's catalog number ("Spine #2"). */
.card__catalog-number {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}