/* The films (pages/projects/, layout: project). Each fills the screen under
   the bar with its own photograph, and the chevrons either side go round
   them. A page's x-project names its look below: the background, the
   colour of its words, and the typeface of its title. */

main.project {
  position: relative;
  min-height: calc(100vh - var(--bar));
  min-height: calc(100dvh - var(--bar));
  padding: 1px 0;
  color: #fff;
  background: #252525 center / cover no-repeat fixed;
  view-transition-name: project;
}

/* --- The chevrons: the whole height of the screen, either side --- */

.handle {
  position: fixed;
  top: var(--bar);
  bottom: 0;
  z-index: 5;
  width: 60px;
  padding: 10px;
  color: #fff;
}

.handle.prev { left: 0; }
.handle.next { right: 0; }

.handle:hover {
  background: rgb(0 0 0 / 0.3);
}

.handle svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: square;
}

/* --- A film --- */

.trailer {
  box-sizing: content-box;
  width: 40vw;
  margin-left: 10%;
  padding: 20px;
  text-shadow: 2px 2px rgb(0 0 0 / 0.5);
}

.title {
  margin: 20px 0;
  font: 100 3em/1.2 "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  letter-spacing: normal;
  text-align: center;
}

.title .larger { font-size: 1.3em; }
.title .base { font-size: 1.5em; line-height: 0.5em; }

.trailer-video {
  display: block;
  width: 100%;
  aspect-ratio: 40 / 22;
  border: 0;
  background: #fff;
}

.description {
  margin-bottom: 10px;
  padding: 10px;
  font-size: 1.3em;
  line-height: 1.4;
}

.festivals {
  display: flex;
  margin-bottom: 30px;
}

.festivals figure {
  width: 25%;
  margin: 0;
  font-size: 14px;
  text-align: center;
}

.festivals img {
  display: block;
  max-width: 100%;
  margin-bottom: 5px;
  padding: 10px;
  background: #fff;
}

.credits {
  margin-bottom: 30px;
  text-align: center;
}

.awards {
  margin-bottom: 30px;
}

.credits h3,
.awards h3 {
  margin: 0;
  font: bold 18px/1.6 var(--font-body);
  letter-spacing: normal;
  text-decoration: underline;
}

.credits p {
  margin: 0 0 1.6em;
}

.awards ul {
  padding: 0;
  list-style: none;
}

.awards li::before {
  content: "- ";
}

/* --- Each film's look --- */

.project.ooae { background-image: url(/static/images/ooae/drinking.jpg); }
.project.ooae .title { font-family: "Coda", cursive; font-weight: bold; }

.project.gal { background-image: url(/static/images/gal/october_gallery.png); }

.project.gaucin { background-image: url(/static/images/gaucin/gaucin.jpg); }
.project.gaucin .title { font-family: "Roboto Condensed", sans-serif; line-height: 50px; }

.project.tagore { color: #e4f6df; background-image: url(/static/images/tagore/tagore.png); }
.project.tagore .title { font-family: "Yatra One", serif; }

.project.johnson { background-image: url(/static/images/johnson/johnson.png); }
.project.johnson .title { font-family: "Meddon", cursive; }

/* Smallcombe sits on the right, its words on a pale card. */
.project.smallcombe { color: #fdf2ba; background-image: url(/static/images/smallcombe/smallcombe.png); }
.project.smallcombe .trailer { margin-right: 10%; margin-left: auto; }
.project.smallcombe .title { font-family: "Josefin Sans", cursive; }

.project.smallcombe .description {
  border-radius: 15px;
  color: #695b15;
  background: #fff;
  opacity: 0.8;
  text-shadow: none;
}

.project.smallcombe .trailer > p:last-child img {
  width: 100%;
  margin-top: 20px;
}

.button-section {
  text-align: center;
}

.button-link {
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 10px 30px;
  border-radius: 20px;
  color: #fff;
  background: #065e5a;
  text-decoration: none;
  text-shadow: none;
}

/* The lectures: a tiled background, and a numbered list, each with its DVD. */
.project.guild { background: #252525 url(/static/images/guild/guild.png) repeat; }
.project.guild .trailer { width: 50vw; margin: auto; }
.project.guild .title { font-family: "Rokkitt", serif; }
.project.guild .description { margin-bottom: 30px; }

.listings {
  padding: 0;
  list-style: none;
  counter-reset: lecture;
}

.listings li {
  display: flex;
  min-height: 150px;
  margin: 20px 0;
  counter-increment: lecture;
}

.listings li::before {
  content: counter(lecture) ".";
  padding-right: 10px;
}

.listing-text {
  flex: 1;
}

.listings p {
  margin: 0;
}

.listings .notice {
  margin-top: 1.6em;
  font-style: italic;
}

.listings img {
  box-sizing: content-box;
  flex: none;
  width: 130px;
  height: 130px;
  padding-left: 10px;
}

/* --- Going round: the next film slides in from the right, the previous one
   from the left (the script in templates/project.html says which). --- */

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html:active-view-transition-type(next)::view-transition-old(project) { animation: 1s ease-in-out both slide-out-left; }
  html:active-view-transition-type(next)::view-transition-new(project) { animation: 1s ease-in-out both slide-in-right; }
  html:active-view-transition-type(previous)::view-transition-old(project) { animation: 1s ease-in-out both slide-out-right; }
  html:active-view-transition-type(previous)::view-transition-new(project) { animation: 1s ease-in-out both slide-in-left; }
}

@keyframes slide-out-left { to { transform: translateX(-100%); } }
@keyframes slide-out-right { to { transform: translateX(100%); } }
@keyframes slide-in-right { from { transform: translateX(100%); } }
@keyframes slide-in-left { from { transform: translateX(-100%); } }

/* --- A narrow screen: the film the width of it, between the chevrons --- */

@media (max-width: 56rem) {
  .handle {
    width: 40px;
    padding: 6px;
  }

  .trailer,
  .project.smallcombe .trailer,
  .project.guild .trailer {
    width: auto;
    margin: 0 40px;
    padding: 20px 10px;
  }

  .title {
    font-size: 2.2em;
  }

  .description {
    font-size: 1.1em;
  }

  .festivals {
    flex-wrap: wrap;
  }

  .festivals figure {
    width: 50%;
  }

  .listings img {
    width: 80px;
    height: 80px;
  }
}