/* Mime Wave Festival 2021 — archive pages (built by festivals/fest2021.mjs).
   Recreates the original www/festival/stylesheet.css + the inline styles of
   its frame pages. Everything is scoped to main.f21 so the site header and
   footer stay untouched. */

/* The original mapped Roboto files to CSS weights one step "up":
   200 = Light, 300 = Regular, 400 = Medium, 500 = Bold, 600 = Black.
   Normal text (400) therefore rendered in Medium and <strong> (700) in
   Black. Same mapping here, under its own family name. */
@font-face { font-family: 'MWF21 Roboto'; src: url(fonts/Roboto-Light.ttf);   font-weight: 200; font-display: swap; }
@font-face { font-family: 'MWF21 Roboto'; src: url(fonts/Roboto-Regular.ttf); font-weight: 300; font-display: swap; }
@font-face { font-family: 'MWF21 Roboto'; src: url(fonts/Roboto-Medium.ttf);  font-weight: 400; font-display: swap; }
@font-face { font-family: 'MWF21 Roboto'; src: url(fonts/Roboto-Bold.ttf);    font-weight: 500; font-display: swap; }
@font-face { font-family: 'MWF21 Roboto'; src: url(fonts/Roboto-Black.ttf);   font-weight: 600; font-display: swap; }

body.fest2021 { background: #eac3a2; }

body.fest2021 main.f21 {
  position: relative;
  display: block;
  font-family: 'MWF21 Roboto', Roboto, Calibri, system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: #000099;
  background-color: #eac3a2;
  padding: 18px 0 110px;
  overflow-x: hidden;
}
.fest2021 main.f21 * { box-sizing: content-box; }
.fest2021 main.f21 img { display: inline; max-width: 100%; height: auto; vertical-align: baseline; }
.fest2021 main.f21 strong { font-weight: 700; }   /* -> Roboto Black, as in the original */
.fest2021 main.f21 a { color: #000; text-decoration: none; }
.fest2021 main.f21 a:hover { color: #bbb; }

/* ---- logo: top-left, as the old fixed logo ---- */
.fest2021 .f21-logo { position: absolute; left: 5px; top: 5px; width: 180px; z-index: 2; }
.fest2021 .f21-logo img { width: 180px; display: block; }
.fest2021 .f21-logo.inv img { filter: invert(1); }      /* day pages: logo inverted */
.fest2021 main.f21 a.f21-logo:hover { color: inherit; }

.fest2021 .f21-wrapper { text-align: center; margin: 0 auto; width: 100%; }

/* ---- PROGRAM / ABOUT boxes ---- */
.fest2021 .f21-menu { display: block; }
.fest2021 main.f21 a.f21-box {
  position: relative;
  display: inline-block;
  width: 180px; height: 100px;
  border: 3px solid #000;          /* "medium" */
  border-radius: 5%;
  font-size: 18px; font-weight: 200;
  color: #000099;
  vertical-align: top;
  transition: 0.1s ease;
}
.fest2021 .f21-box span { position: absolute; left: 0; width: 100%; bottom: 40%; text-align: center; }
.fest2021 .f21-box.program { background: #cedbff; }
.fest2021 .f21-box.about { background: #ffd9d9; }
.fest2021 .f21-box.about.on { background: #eccfb8; }     /* original used the beige box here */
.fest2021 .f21-box.on { filter: invert(100%); }
.fest2021 main.f21 a.f21-box:not(.on):hover { filter: invert(1); color: #000099; }
.fest2021 main.f21 a.f21-box.on:hover { color: #000099; }

/* ---- home + about text ---- */
.fest2021 .f21-text { text-align: justify; max-width: 800px; margin: 0 auto; padding: 0 16px; }
.fest2021 .f21-home .f21-text { padding-top: 42px; }
.fest2021 .f21-greeting { font-size: 20px; margin-bottom: 40px; }
.fest2021 .f21-included { font-size: 18px; font-weight: 300; }
.fest2021 .f21-list { font-size: 16px; font-weight: 300; margin: 18px 0 40px; }
.fest2021 .f21-topics { font-weight: 200; }

.fest2021 .f21-about .f21-text { padding-top: 56px; }
.fest2021 .f21-about .f21-text + .f21-photos + .f21-text { padding-top: 40px; }
.fest2021 h2.f21-head { font-size: 16px; font-weight: 400; text-decoration: underline; margin: 0 0 18px; padding: 0; background: none; border: 0; filter: none; color: inherit; letter-spacing: normal; line-height: normal; }
.fest2021 h2.f21-head + .f21-about-p + h2.f21-head { margin-top: 56px; }
.fest2021 .f21-about-p { font-size: 15px; font-weight: 300; margin-bottom: 18px; }
.fest2021 .f21-about-p strong { font-weight: 700; }
.fest2021 main.f21 a.f21-tablelink { color: #077; }
.fest2021 main.f21 a.f21-tablelink:hover { filter: invert(1); }
.fest2021 .f21-photos { text-align: center; margin: 18px auto 0; padding: 0 16px; }
.fest2021 .f21-photos img { width: 40%; max-width: 500px; margin: 0 2px; }

/* ---- YouTube (16:9, responsive) ---- */
.fest2021 .f21-video { position: relative; width: 100%; margin: 0 auto; aspect-ratio: 16 / 9; height: auto; }
.fest2021 .f21-video.big { max-width: 700px; }
.fest2021 .f21-video.mid { max-width: 560px; margin-bottom: 20px; }
.fest2021 .f21-video.small { max-width: 450px; margin-top: 40px; }
.fest2021 .f21-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ---- programme days ---- */
body.fest2021 main.f21-day {
  background-color: #2b2783;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width: 761px) and (hover: hover) {
  body.fest2021 main.f21-day { background-attachment: fixed; }
}
.fest2021 .f21-took { color: #eac2a3; margin: 19px 0 19px; padding: 0 10px; }

.fest2021 .f21-tabs { display: block; padding: 0 8px; }
.fest2021 main.f21 a.f21-tab {
  position: relative;
  display: inline-block;
  width: 110px; height: 30px;
  margin: 0 0 4px;
  border: 3px solid #000;
  border-radius: 5%;
  background: #deffd5;
  font-size: 17px; font-weight: 200;
  color: #000;
  vertical-align: top;
}
.fest2021 main.f21 a.f21-tab.on { background: #87fc67; }
.fest2021 .f21-tab span { position: absolute; left: 0; width: 100%; bottom: 15%; text-align: center; }
.fest2021 main.f21 a.f21-tab:hover { filter: invert(1); color: #000; }

.fest2021 .f21-frame {
  display: inline-block;
  width: 80%;
  margin-top: 0;
  background: #fff;
  border: 3px solid #000;
  border-radius: 1%;
  font-size: 17px; font-weight: 200;
  text-align: center;
  color: #000099;
  overflow: hidden;
}
.fest2021 .f21-frame h1 {
  font-size: 25px; font-weight: 700;
  padding: 10px; margin: 0;
  background-color: #2b2783;
  background-repeat: repeat;
  filter: opacity(0.8);
  color: #eac2a3;
  border: 2px solid #000;
  line-height: normal; letter-spacing: normal; text-align: center;
}
.fest2021 .today-subject { padding: 5px; text-align: center; font-size: 18px; }
.fest2021 .f21-dayhead { padding-top: 10px; }
.fest2021 .f21-note { font-size: 15px; }
.fest2021 .today {
  padding: 10px 30px;
  text-align: justify;
  max-width: 600px; min-width: 200px;
  margin: 0 auto;
  font-size: 15px;
  border-bottom: 2px solid;
}
.fest2021 .f21-s { font-size: 14px; }
.fest2021 main.f21 a.f21-act { color: #000099; }
.fest2021 main.f21 a.f21-act:hover { color: #000099; text-decoration: underline; }
.fest2021 .f21-photo { margin-top: 5px; }
.fest2021 .today img + img { margin-left: 4px; }

/* ---- phones ---- */
@media (max-width: 760px) {
  .fest2021 .f21-logo { position: static; display: block; width: 140px; margin: 0 0 14px 16px; }
  .fest2021 .f21-logo img { width: 140px; }
  .fest2021 main.f21 { padding-top: 10px; }
}
@media (max-width: 560px) {
  .fest2021 main.f21 a.f21-box { width: 150px; height: 84px; font-size: 17px; }
  .fest2021 .f21-frame { width: calc(100% - 20px); }
  .fest2021 .today { padding: 10px 14px; min-width: 0; text-align: left; }
  .fest2021 .f21-photos img { width: 46%; }
  .fest2021 .f21-text { text-align: left; }
}