@font-face {
  font-family: "Euclid";
  src: url(../fonts/euclid-flex-light.woff2) format("woff2");
  font-weight: 300 400;
  font-display: swap;
}

:root {
  --text: #333;
  --dark: #222;
  --line: #eee;
  --serif: Futura, "Times New Roman", serif;
  --menu: "Crimson Text", "Times New Roman", serif;
  --nav-h: 66px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 400 1rem/1.5 "Euclid", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 2px;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 currentColor;
  transition: box-shadow .2s, color .2s;
}
a:hover, a:focus { box-shadow: inset 0 -2px 0 currentColor; }

p { margin: 0 0 1.5em; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link:focus {
  width: auto;
  height: auto;
  clip: auto;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: .75em 1em;
  background: #fff;
  box-shadow: none;
}

.wrap { margin: 0 auto; padding: 0 1.5em; }
.narrow { max-width: 740px; padding: 0 3em; }
.wide { padding: 0 10%; }

.site-header { position: relative; color: #fff; }
.hero {
  position: relative;
  height: 60vh;
  min-height: 420px;
  overflow: hidden;
  background: #5a8a94;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.is-home .hero { height: calc(100vh - var(--nav-h)); min-height: 520px; }
.hero picture, .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-bg { object-fit: cover; object-position: 50% 50%; }
.branding {
  position: relative;
  text-align: center;
  padding: 0 1.5em 5vh;
  max-width: 1000px;
}
.laurels { width: 800px; margin: 0 auto 1.5em; }
.site-title {
  margin: 0;
  font-weight: 400;
  font-size: 5.5rem;
  line-height: 1.25;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.site-title a { box-shadow: none; }
.site-description { margin: .25em 0 0; font-size: 1rem; opacity: .9; }
.page .site-title { font-size: 3.5rem; }
.page .laurels { width: 600px; }

.main-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--menu);
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav a {
  display: block;
  padding: 22px 1.25em;
  line-height: 21px;
  color: var(--dark);
  font-weight: 700;
  box-shadow: none;
}
.main-nav a:hover, .main-nav a:focus, .main-nav a[aria-current] { color: #767676; }
.menu-toggle { display: none; }

.section { padding: 5em 0 4em; }
.label {
  margin: 0 0 1.5em;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: var(--dark);
}
.page-title { margin-bottom: 2.5em; }

.summary { padding: 4em 0 3em; }
.summary .wrap { max-width: 86%; padding: 0; }
.summary p + p { margin-top: 1em; }
.summary p {
  margin: 0;
  color: #404040;
  font-size: 20px;
  font-weight: 700;
  line-height: 2;
  text-align: justify;
  hyphens: auto;
}

#about p { text-align: center; }

.text { text-align: left; }
.text h2 {
  margin: 2.25em 0 .75em;
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dark);
}
.text ul { margin: 0 0 1.5em; padding-left: 1.25em; }
.text ul li { margin: 0 0 .5em; }
.text .plain { padding-left: 0; }
.text + .credits, .text + .note { margin-top: 2.5em; }
.more { text-align: center; }
.more a { font-family: var(--serif); text-transform: uppercase; font-size: 14px; }
.table-wrap { margin: 0 0 2em; overflow-x: auto; }
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  letter-spacing: 1px;
}
.table-wrap th, .table-wrap td {
  padding: .6em .75em;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.table-wrap th {
  font-family: var(--serif);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--dark);
  border-bottom-color: #ccc;
}
.table-wrap td:first-child { color: #666; width: 42%; }
.screenings .text { margin-bottom: 3em; }

.quotes {
  padding: 6em 1.5em;
  background: #2b2118 url(../img/hungry-ghost-ritual.webp) center / cover no-repeat;
  color: #fff;
  text-align: center;
  text-shadow: 0 15px 5px rgba(0, 0, 0, .1), 10px 20px 5px rgba(0, 0, 0, .05), -10px 20px 5px rgba(0, 0, 0, .05), 0 0 25px #000;
}
.quotes blockquote { max-width: 640px; margin: 0 auto 2.5em; }
.quotes blockquote:last-child { margin-bottom: 0; }
.quote {
  margin: 0 0 .6em;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.quote .big { font-size: 24px; }
.quotes .cite {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.panel-image {
  height: 100vh;
  max-height: 900px;
  background: #333 var(--bg) center / cover no-repeat fixed;
}

.note { text-align: center; text-transform: uppercase; font-size: 14px; }
.note em { font-family: var(--serif); }
.credits {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 2.3;
}
.credits div { margin: 0; }
.credits dt, .credits dd { display: inline; margin: 0; }
.credits dt { font-weight: 700; }

.reviews { text-align: center; }
.reviews blockquote { margin: 0 0 1.5em; }
.reviews p { margin: 0 0 .75em; }
.reviews .cite { font-weight: 700; text-transform: uppercase; }
.stars { letter-spacing: 0; }

.wide-image { margin: 3em 0 4em; }
.wide-image img { width: 100%; }

.awards { list-style: none; margin: 0; padding: 0; text-align: center; }
.awards li { margin: 0 0 1.5em; }
.awards strong { display: block; text-transform: uppercase; font-weight: 700; }
.awards span { display: block; }

.bios section { margin: 0 0 2.5em; text-align: center; }
.bios h2 {
  margin: 0 0 .25em;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.bios .name { text-transform: uppercase; }
.bios p { margin: 0; font-size: 15px; }

.screenings { text-align: center; }
.screenings .label { margin-top: 2.5em; }
.screenings .label:first-child { margin-top: 0; }
.screenings h3 {
  margin: 1.5em 0 .5em;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
}
.venues, .plain { list-style: none; margin: 0 0 1.5em; padding: 0; }
.venues li { margin: 0 0 .6em; }
.venues span { display: block; font-size: 14px; color: #666; }
.plain li { margin: 0 0 .3em; }
.contact-line { margin-top: 3em; text-align: center; }
.contact .contact-line:first-child { margin-top: 0; }

.site-footer {
  padding: 22% 1.5em 70px;
  background: #1c2226 url(../img/crabs-at-dusk.webp) center / cover no-repeat;
  color: #fff;
  text-align: center;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.footer-text p { margin: 0 0 1em; }
.footer-text a { font-weight: 700; box-shadow: 0 4px 4px -4px #fff; }
.footer-text .copy { margin: 2em 0 0; opacity: .75; font-size: 11px; }

@media (hover: none), (max-width: 1024px) {
  .panel-image { background-image: var(--bg-sm); background-attachment: scroll; height: auto; aspect-ratio: 2000 / 858; }
  .quotes { background-image: url(../img/hungry-ghost-ritual-1024.webp); }
  .site-footer { background-image: url(../img/crabs-at-dusk-1024.webp); }
}

@media (max-width: 1200px) {
  .site-title { font-size: 4rem; }
  .laurels { width: 640px; }
}

@media (max-width: 767px) {
  :root { --nav-h: 56px; }
  .hero { height: 55vh; min-height: 340px; }
  .is-home .hero { height: 75vh; min-height: 460px; }
  .laurels, .page .laurels { width: 100%; max-width: 420px; margin-bottom: 1em; }
  .site-title, .page .site-title { font-size: 1.9rem; letter-spacing: .15em; }
  .page .site-title { font-size: 1.5rem; }
  .branding { padding-bottom: 2.5em; }
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    width: 100%;
    height: 55px;
    border: 0;
    background: none;
    color: var(--dark);
    font: 700 14px/1 var(--menu);
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .bars, .bars::before, .bars::after {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    position: relative;
  }
  .bars::before, .bars::after { content: ""; position: absolute; left: 0; }
  .bars::before { top: -5px; }
  .bars::after { top: 5px; }
  .main-nav ul { display: none; flex-direction: column; padding-bottom: .5em; border-top: 1px solid var(--line); }
  .main-nav.is-open ul { display: flex; }
  .main-nav a { padding: 12px 1.5em; text-align: center; }
  .section { padding: 3.5em 0 3em; }
  .narrow { padding: 0 1.25em; }
  .wide { padding: 0 1.25em; }
  .summary { padding: 3em 0 2.5em; }
  .summary .wrap { max-width: none; padding: 0 1.25em; }
  .summary p { text-align: left; }
  .quotes { padding: 4em 1.25em; }
  .quote { font-size: 17px; }
  .quote .big { font-size: 20px; }
  body { letter-spacing: 1px; }
  .credits { font-size: 13px; line-height: 1.9; }
  .credits div { margin-bottom: .5em; }
  .credits dt { display: block; }
  .bios p { font-size: 14px; }
  .site-footer { padding-top: 45%; }
  .stack tr:first-child { display: none; }
  .stack tr, .stack td { display: block; }
  .stack tr { padding: .75em 0; border-bottom: 1px solid var(--line); }
  .stack td, .stack td:first-child { width: auto; padding: .15em 0; border: 0; }
}