:root {
  --navy: #252525;
  --deep: #171717;
  --red: #b5162b;
  --coral: #d53d51;
  --cream: #fff;
  --paper: #fff;
  --blue: #f3f3f3;
  --line: #d9d9d9;
}
body { background: #fff; color: #252525; }
.site-header { border-bottom-color: #e7e7e7; }
.hero { background: linear-gradient(115deg, #fff 0%, #fff 53%, #f7f2f2 100%); }
.hero-art, .event-feature { background: #1c1c1c; }
.hero-photo { box-shadow: 15px 15px 0 #d53d51; }
.hero-portrait { box-shadow: 9px 11px 0 #a7192a; }
.hero-logo { width: 780px; height: 390px; left: 44%; top: 19px; background-position: -430px 0; transform: scale(.42); }
.brand-official { width: 158px; min-width: 158px; height: 80px; }
.brand-source { width: 158px; height: 80px; background-size: 265px 410px; background-position: -89px -1px; }
.brand-footer { background: #fff; border-radius: 4px; }
.work { background: #f3f3f3; }
.story-aside { background: #f3f3f3; transform: rotate(1deg); border-left: 5px solid var(--red); }
.story-aside blockquote { margin: 2px 0 21px; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: clamp(20px, 2vw, 26px); line-height: 1.46; }
.story-aside .quote-credit { margin: 0; color: var(--red); font: 700 13px/1.4 'DM Sans', Arial, sans-serif; letter-spacing: .04em; }
.story-aside small { color: #666; margin-top: 24px; }
.events .event:not(.event-feature) { background: #f8f8f8; border-top-color: #bf5663; }
.facebook-updates { background: #f4f4f4; }
.vendors { background: #f7f7f7; }
.vendor-form { box-shadow: 11px 11px 0 #ddd; }
.join { background: #a8162a; }
.join h2 em { color: #fff; }
.join .section-no, .join-actions > span { color: #f4d5da; }
.footer { background: #171717; }
.footer-bottom { border-top-color: #444; }
.nav-contact:hover, .button-primary:hover { background: #8f1323; }
.button-light { color: #a8162a; }
@media (max-width: 1050px) {
  .hero-logo { left: 42%; transform: scale(.36); }
}
@media (max-width: 760px) {
  .brand-official { height: 70px; }
  .hero-logo { left: 43%; top: 20px; transform: scale(.30); }
  .hero-photo { box-shadow: 9px 9px 0 #d53d51; }
  .story-aside { transform: none; }
}
@media (max-width: 480px) {
  .hero-logo { left: 40%; top: 13px; transform: scale(.235); }
  .hero-photo { min-height: 390px; }
  .photo-caption { max-width: 190px; }
}