@import 'fonts.css';

/* GLOBAL */
:root {
  --primary-font: "Arial", sans-serif;
  --secondary-font: "Newsreader", "Times New Roman", "Times", serif;
  --text-color: #00149D;
  --text-color-secondary: #ECECEC;
  /* --text-highlight: #94C600; */
  --fade-in-effect: fadein 800ms;
  font-size: calc(1em + 0.5vw);
  cursor: ns-resize;
  letter-spacing: -0.01em;
  font-family: var(--primary-font);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-animation: var(--fade-in-effect);
  -moz-animation: var(--fade-in-effect);
  -ms-animation: var(--fade-in-effect);
  -o-animation: var(--fade-in-effect);
  animation: var(--fade-in-effect);
}

::selection {
  color: var(--text-color-secondary);
  background: var(--text-color);
}

html, body {
  margin: 0;
  padding: 0;
  touch-action: manipulation;
}

body {
  display: grid;
  grid-template-columns: minmax(min-content, 20%) 1fr;
  overflow: hidden;
  height: 100vh;
  background-color: #F0F0F0;
}

/* XTRA NARROW SCREEN SIZE */
#surprise {
  display: none;
}

header {
  padding: 0 1em;
  border-right: 1px solid var(--text-color);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

h2 {
  font-weight: normal;
  font-size: 2.4em;
  line-height: 1em;
  margin: 0.3em 0 0 0;
}

/* REASSEMBLAGE TITLE*/
h3, h4 {
  font-weight: normal;
  margin-bottom: 0.7em;
}

h5 span {
  font-weight: normal;
}

nav a:hover, img:hover {
  cursor: scroll;
}

header div h4 a {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  min-width: fit-content;
  overflow-wrap: break-word;
  /* pointer-events: none; */
}

p, a, ul, h3 {
  font-size: 0.8em;
}

header figure {
  width: 50%;
  margin: inherit;
}

header p {
  font-style: italic;
  line-height: 1.25em;
  border-top: 1px dashed var(--text-color);
  padding-top: 1.5em;
}

header p, header nav a, section.main-program a, div.program-item pre {
  font-size: 0.6em;
}

header nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

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

.active {
  text-decoration: underline;
}

a:hover {
  cursor: grab;
  text-decoration: underline;
}

a:focus {
  cursor: grabbing;
}

pre {
  font-family: sans-serif;
}

main {
  overflow-y: scroll;
  /* height: 100%; */
  /* width: 100%; */
  padding: 0;
}

img {
  width: 100%;
}

li {
  display: inline;
  margin: auto;
}

li a {
  text-decoration: none;
  color: inherit;
}

ol {
  /* margin: 0;
  padding: 0; */
}

hr {
  border-top: 1px dashed var(--text-color);
}

hr+hr {
  opacity: 0;
}

/* LANDING PAGE IMAGE*/
section.main-program-image {
  background-image: url('../images/nahual.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  margin: 1em;
  height: 95vh;
  justify-content: flex-end;
  align-items: flex-start;
}

div.current-screening {
  color: var(--text-color-secondary);
  margin: 1em;
  display: flex;
  flex-direction: column;
  width: 90%;
  align-content: stretch;
  flex-wrap: nowrap;
}

div.current-screening h2 {
  /* font-family: 'Noto Sans SC', sans-serif;
  color: #CCCCCC; */
}

div.current-screening sup {
  vertical-align: bottom;
}

div.current-screening p {
  margin: 0.625em 0 0 0;
}

div.current-screening p em {
  font-style: inherit;
  font-family: sans-serif;
}

div.current-screening a {
  font-size: inherit;
  color: inherit;
}

div.current-screening p.festival-font {
  /* color: black; */
  /* font-style: oblique; */
}

div.current-screening a.button-white {
  padding: 1em;
  border-radius: 10em;
  border: 1px dashed var(--text-color-secondary);
  margin: 1em 0;
  width: fit-content;
}

div.current-screening a.button-white:hover {
  border: 1px solid var(--text-color-secondary);
}

/* LANDING PAGE VIDEO*/
section.main-program {
  width: 100%;
}

section.main-program aside {
  position: absolute;
  top: 0;
  height: 0.85em;
  width: inherit;
  z-index: 1;
  background-color: #F0F0F0;;
}

section.main-program video {
  overflow-x: hidden;
  overflow-y: hidden;
  z-index: -1;
  margin: 1em;
  transform: translateY(-3em);
  width: -webkit-fill-available;
  width: -moz-available;
}

section.main-program video+aside {
  position: absolute;
  bottom: 0;
  height: 0.85em;
  width: inherit;
  z-index: 1;
  background-color: #F0F0F0;;
}

section.main-program img#gif-mobile-swap {
  display: none;
}

v section.main-program a.video-link {
  position: relative;
  bottom: 5em;
  left: 34.2vw;
  color: var(--text-color-secondary);
}

section.main-program img {
  height: 95%;
  overflow-x: hidden;
  margin: 1em;
}

/* PROGRAM LIST */
section.program-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

div.program-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 60%;
  border-top: 1px dashed var(--text-color);
  margin-top: 5%;
}

.program-list article {
  width: 60%;
  border: 1px solid var(--text-color);
  margin-top: 1em;
}

section.program-list article h3 {
  font-size: 0.7em;
  border-bottom: 1px solid var(--text-color);
  padding: 0 1.25em 0.25em 1.25em;
  margin: 0.3em 0 0 0;
  text-align: center;
}

.program-list article div.program-item {
  display: grid;
  grid-template-columns: auto 1fr 3fr;
  background: #F0F0F0;;
}

.program-list article div.program-item pre {
  text-align: center;
  grid-row: 1 / 3;
  grid-column: 1;
  background: var(--text-color-secondary);
  color: var(--text-color);
  padding: 0 0.2em 0 0.3em;
  margin: 0;
  left: 0.1em;
  top: 0.1em;
  height: 98%;
  position: relative;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
}

.demo {
  opacity: 0;
}

.inactive-link {
  pointer-events: none;
}

.program-list article div.program-item a {
  grid-row: 1 / 3;
  grid-column: 2;
  margin: auto auto;
  width: 100%;
  height: auto;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.program-list article div.program-item h5 {
  padding: 0 1em;
  align-self: end;
  margin: 0;
}

.program-list article div.program-item p {
  font-size: 0.6em;
  margin-top: 0.25em;
  padding: 0 1.3em;
}

div.program-item+div.program-item {}

/* ABOUT */
main.about-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
}

main.about-wrapper section {
  margin-top: 3em;
  width: 60%;
  display: flex;
  flex-direction: column;
  font-size: 0.8em;
  line-height: 1.15em;
}

a.button2 {
  margin-top: 0.75em;
  padding: 1em;
  border-radius: 10em;
  border: 1px dashed var(--text-color);
  text-align: center;
}

main.about-wrapper section a.button2:hover {
  border: 1px solid var(--text-color);
}

main.about-wrapper section p a {
  font-size: inherit;
}

main.about-wrapper section pre {
  font-size: 0.7em;
  margin: 0em;
  text-align: center;
}

/* SCREENING DETAILS */
main.screening-details {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 1em;
  align-items: center;
}

main.screening-details p, main.screening-details h2 {
  text-align: center;
}

main.screening-details h3 {
  text-align: center;
}

main.screening-details aside, main.screening-details p.bio {
  line-height: 1.3em;
}

nav.button {
  margin: 2em;
  padding: 1em;
  border-radius: 10em;
  border: 1px dashed var(--text-color);
}

nav.button:hover {
  border: 1px solid var(--text-color);
  cursor: pointer;
}

main.screening-details p.bio {
  text-align: left;
  font-size: 0.8em;
  width: 100%;
}

main.screening-details em>a {
  font-size: inherit;
}

main.screening-details aside.shorts-series-header {
  width: 60%;
  margin-top: 2em;
}

aside.shorts-series-header h3 {
  margin: 0 0 1em 0;
  font-size: 0.7em;
  text-align: center;
  line-height: normal;
}

main.screening-details aside.shorts-series-header p {
  font-size: 0.5em;
  margin: 0.2em 0;
  text-align: center;
  line-height: normal;
}

main.screening-details aside.shorts-series-header p.shorts-description {
  font-size: 0.7em;
  text-align: left;
  margin: 1em 0;
  line-height: 1.3em;
}

#center {
  text-align: center;
}

main.screening-details aside.shorts-series-header a {
  border: 1px dashed var(--text-color);
  border-radius: 1em;
  font-size: 0.65em;
  text-align: left;
  margin-right: 0.5em;
  padding: 0.1em 1em;
  display: block;
  line-height: normal;
  text-align: center;
  margin-bottom: 0.5em;
}

main.screening-details aside.shorts-series-header a.active02 {
  border: 1px solid var(--text-color);
  border-radius: 1em;
}

main.screening-details aside.shorts-series-header a:hover {
  border: 1px solid var(--text-color);
  border-radius: 1em;
}

/* CENTER ALIGNED NUMBER TAGS */
main.screening-details div.series-divider {
  color: var(--text-color-secondary);
  background-color: var(--text-color);
  border: 1px solid var(--text-color);
  border-radius: 10em;
  margin-bottom: 1em;
  text-align: center;
  font-size: 0.6em;
  padding: 0.1em 1em;
}

/* ESSAY LAYOUT */
.essay {
  columns: 300px 3;
  column-rule: 1px dotted #ccc;
  column-gap: 3em;
  line-height: 1.3em;
  font-size: 0.8em;
}

.essay .intro:first-child {
  font-style: normal;
}

.essay .intro {
  column-span: all;
  margin-bottom: 1em;
  font-style: oblique;
}

.intro+.intro {
  margin-top: 1em;
}

.intro:nth-of-type(4) {
  margin-bottom: 3em;
}

/* RESOURCES */
#template, .template {
  display: none;
}

section.resources div {
  width: 60%;
  margin: 3em auto 0 auto;
}

section.resources div h3 {
  border-top: 1px dashed var(--text-color);
  padding-top: 1em;
  margin-bottom: 2em;
}

section.resources a {
  padding: 0em;
  display: grid;
  grid-template-columns: 2fr 3fr 1fr;
  margin: 0.3em 0;
}

section.resources a span {
  margin: auto 0;
}

section.resources a span:last-child {
  text-align: right;
}

section.resources span {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

section.resources span a {
  display: block;
  margin-right: 1em;
  width: 30%;
}

@media (max-width: 788px) {
  body {
    display: flex;
    flex-direction: column;
    grid-template-rows: minmax(min-content, 20%) 1fr;
  }

  header {
    border-right: 0;
    border-bottom: 1px solid var(--text-color);
    height: auto;
  }

  nav {
    position: inherit;
  }

  main.screening-details {
    margin: 1em 1em;
  }

  h2 {
    font-size: 8vw;
  }

  section.main-program {
    height: auto;
    width: 100%;
  }

  section.program-list div.program-header.current {
    margin-top: 0;
  }

  section.resources div, section.program-list div.program-header, .program-list article, main.about-wrapper section, main div.current-screening {
    width: 90%;
  }

  main.screening-details aside.shorts-series-header {
    width: 100%;
  }

  main.about-wrapper section, section.program-list div.program-header.current, main.screening-details aside.shorts-series-header, section.resources div {
    margin-top: 2em;
  }

  .program-list article div.program-item h5 {
    margin-top: 3vw;
  }

  .program-list article div.program-item p {
    margin-bottom: 3vw;
    margin-top: 1vw;
  }
}

@media (max-width: 425px) {
  section.main-program aside {
    display: none;
  }

  section.main-program video {
    display: none;
  }

  section.main-program img#gif-mobile-swap {
    display: block;
    width: -webkit-fill-available;
    width: -moz-available;
  }

  div.program-header {
    margin-top: 3em;
  }
}

@media (max-width: 250px) {
  #surprise {
    display: block;
  }

  header, main, main.about-wrapper {
    display: none;
  }
}

<head>
  <style>
  sup a {
    text-decoration: none;
    font-size: 0.75em;  /* Smaller than normal text */
    vertical-align: super;
  }

  /* Footnote list at the bottom */
  ol {
    font-size: 0.85em;     /* Smaller font for footnotes */
    color: #555;           /* Muted color */
    margin-top: 2em;
    padding-left: 1.2em;
  }

  /* Each footnote item */
  ol li {
    margin-bottom: 0.5em;
    line-height: 1.4;
  }

  /* Link back to the main text */
  ol li a {
    text-decoration: none;
    font-size: 0.75em;
    margin-left: 0.5em;
  }
  </style>
</head>