@charset "UTF-8";
.street-faire {
  --sfBackground: url('../../images/streetfaire/2026/street-faire-crop-900-med.jpg') no-repeat fixed 50% 50%;
  --weekly: hsl(213, 63.6%, 56.9%);
  --week1: hsl(33.3, 81.9%, 38.5%);
  --week2: hsl(2.9, 59.8%, 41%);
  --week3: hsl(341.8, 63.3%, 44.9%);
  --week4: hsl(319.6, 59.1%, 36.5%);
  --week5: hsl(291, 44.9%, 34.9%);
  --week6: hsl(249.8, 40.6%, 41.6%);
  --week7: hsl(212.3, 50.3%, 36.3%);
  --week8: hsl(169.9, 80.5%, 26.1%);
  --faire-nav-color: #fff;
  --wp--custom--spacing--outer: 0; }
  @media (min-width: 768px) and (min-height: 768px) {
    .street-faire {
      --sfBackground: url('../../images/streetfaire/2026/street-faire-crop-3600-low.jpg') no-repeat fixed 50% 50%; } }
  .street-faire:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--sfBackground);
    background-size: 100vmax;
    background-attachment: scroll;
    /* sorry, fixed background no good for iOS. Since the element is fixed we don't need fixed bg here */
    transition: 1s all;
    /** fix for iOS —
                                      * when scrolling, the viewport grows,
                                      * which changes the size of the image.
                                      * This prevents this being a jump.
                                      */ }
    @media (min-width: 65rem) {
      .street-faire:before {
        transform: rotate(calc(-22deg * var(--scroll))) scale(calc(1 + var(--scroll)));
        transition: none;
        /* no transition please, we're good */
        background-position-x: calc(50% + 50% * var(--scroll));
        background-position-y: calc(50% + 50% * var(--scroll)); } }
  .street-faire,
  .street-faire .wp-site-blocks {
    overflow-x: clip;
    /**
     * This is done to enable sticky elements, and should possibly be moved to
     * the overall website overflow-x property
     * @see https://stackoverflow.com/a/47878455/156645
     * @see https://stackoverflow.com/questions/47095596/body-overflow-x-hidden-breaks-position-sticky
     */ }
  .street-faire header {
    height: 0;
    color: #fff;
    --header-nav-color: #fff; }
    .street-faire header .wp-block-navigation-item__content:before {
      border-color: #fff; }
    @media (max-width: 65rem) {
      .street-faire header > div {
        background: var(--weekly); } }
    @media (min-width: 65rem) {
      .street-faire header .wp-block-column .wp-block-template-part {
        position: relative; }
        .street-faire header .wp-block-column .wp-block-template-part:before {
          content: '';
          background: var(--weekly);
          position: absolute;
          top: 0;
          left: -50vw;
          right: 0;
          bottom: 0;
          z-index: -1; } }
    .street-faire header .wp-block-navigation {
      --wp--custom--spacing--outer: 32px; }
  .street-faire main {
    margin: 0 -24px;
    padding: 24px;
    position: relative; }
    .street-faire main:before, .street-faire main:after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      right: 0; }
    .street-faire main > div {
      position: relative;
      z-index: 1; }
  .street-faire h1.wp-block-post-title {
    color: transparent;
    padding-top: Max(4rem, calc(100vh - Min(48vw, 16rem)));
    margin: 0 !important;
    position: relative; }
  .street-faire .intro {
    max-width: none; }
    .street-faire .intro p {
      margin-top: -4px;
      padding: 3rem;
      background: white;
      z-index: 1;
      position: relative; }
  .street-faire .faire-nav {
    margin: 0;
    max-width: none;
    background: var(--weekly);
    padding: 1.5rem 3rem .5rem; }
    .street-faire .faire-nav h3 {
      margin: -.5rem; }
    .street-faire .faire-nav:before, .street-faire .faire-nav:after {
      top: 2rem;
      width: calc(50% - 4rem); }
    .street-faire .faire-nav:before {
      left: 2rem; }
    .street-faire .faire-nav:after {
      right: 2rem; }
  .street-faire .join {
    font-size: .5em;
    font-family: var(--wp--preset--font-family--proxima-vara-roman);
    font-weight: bold; }
  .street-faire .sf2026 {
    display: block; }
  .street-faire .intro h2,
  .street-faire .featured-artist .headliner .headline,
  .street-faire .featured-artist .headliner .date {
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    line-height: .75;
    text-shadow: 0 4px 15px var(--weekly); }
  .street-faire .intro h2 {
    font-size: clamp(3rem, 10.5vw, 7.5rem);
    text-align: center;
    max-width: none; }
  .street-faire .featured-artist .headliner .headline,
  .street-faire .featured-artist .headliner .date {
    font-size: clamp(3rem, 10vw, 7.5rem);
    padding: 0; }
  .street-faire .featured-artist {
    position: relative;
    z-index: 1;
    padding: Max(7rem, 11.5vw) 5% 2rem;
    max-width: none;
    margin: 0;
    border-radius: 0;
    backdrop-filter: blur(6px); }
    .street-faire .featured-artist .desc {
      padding: .5em .75em;
      max-width: 42em;
      background: rgba(255, 255, 255, 0.9); }
    .street-faire .featured-artist .date {
      margin-bottom: .5em; }
      @media (max-width: 83.99rem) {
        .street-faire .featured-artist .date {
          position: absolute;
          top: 2.5rem;
          left: 0;
          margin-left: 0;
          text-align: center;
          right: 0; } }
      @media (min-width: 84rem) {
        .street-faire .featured-artist .date {
          position: relative; }
          .street-faire .featured-artist .date:before {
            content: '';
            display: block;
            position: absolute;
            left: -6.5rem;
            top: -6rem;
            bottom: -6rem;
            width: 6rem;
            background: var(--weekly);
            clip-path: polygon(0 0, 100% 50%, 0 100%); } }
    .street-faire .featured-artist h3 {
      margin-bottom: 1.5em; }
    .street-faire .featured-artist .genre {
      background: rgba(255, 255, 255, 0.9);
      display: inline;
      padding: .125em .5em; }
    .street-faire .featured-artist .band_links {
      margin-top: .5em; }
      .street-faire .featured-artist .band_links a {
        text-decoration: none;
        color: #fff;
        font-weight: 700;
        background: var(--weekly);
        padding: .25em .5em;
        margin-right: .5em; }
    .street-faire .featured-artist .sponsors {
      margin: 0;
      padding: 0 2.5rem 2.5rem;
      background: #fff;
      box-shadow: 0 0 0.5rem var(--weekly); }
      .street-faire .featured-artist .sponsors h2 {
        background: var(--weekly);
        margin: 0 -1.5rem 1.5rem;
        color: #fff;
        padding: .5em; }
    @media (max-width: 83.99rem) {
      html .street-faire .featured-artist {
        flex-direction: column-reverse;
        text-align: center; } }
    @media (min-width: 84rem) {
      .street-faire .featured-artist {
        align-items: center !important;
        gap: 3vw;
        min-height: 90vh; } }
.lineup #schedule {
  padding: 0; }
  .lineup #schedule li {
    list-style: none;
    padding: .5rem;
    position: relative;
    z-index: 1;
    transition: .2s all; }
    .lineup #schedule li:before, .lineup #schedule li:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 100%;
      transition: .2s all;
      background: var(--weekly);
      z-index: -1; }
    @media (max-width: 64.99rem) {
      .lineup #schedule li:after {
        background: var(--sfBackground);
        background-size: 100vmax;
        opacity: .5; } }
    .lineup #schedule li:hover:before, .lineup #schedule li:hover:after {
      bottom: 0; }
    .lineup #schedule li:hover .headline,
    .lineup #schedule li:hover .genre,
    .lineup #schedule li:hover a {
      color: #fff;
      text-shadow: 0 0 3px var(--weekly); }
    .lineup #schedule li + li {
      margin-top: 1em; }

.lineup h3 {
  margin: 0;
  font-weight: 900;
  line-height: .75; }

.lineup .headline,
.lineup .genre {
  transition: .2s all; }

.lineup .date {
  color: #fff;
  display: block;
  padding: .75em .5em;
  margin: -.5rem -.5rem .5rem;
  text-decoration: none; }
  .streetfaire-main .lineup .date {
    background: var(--weekly); }

.streetfaire-main .lineup a.date {
  position: relative; }
  @media (max-width: 64.99rem) {
    .streetfaire-main .lineup a.date:after {
      content: '';
      background: var(--sfBackground);
      background-size: 100vmax;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: calc(100% - 4.5em);
      opacity: .5; } }
.lineup strong.date:before {
  content: '';
  display: block;
  position: absolute;
  left: -5.25em;
  top: -5em;
  bottom: -5em;
  width: 5em;
  background: var(--weekly);
  clip-path: polygon(0 0, 100% 50%, 0 100%); }
  @media (max-width: 64.99rem) {
    .lineup strong.date:before {
      background: var(--weekly) var(--sfBackground);
      background-size: 100vmax; } }
.lineup .headline {
  color: var(--weekly);
  font-size: clamp(2rem, 7vw, 3.5rem); }

.lineup .genre {
  margin: 0;
  font-weight: 800;
  color: var(--weekly); }

.lineup .more {
  font-weight: 600;
  display: block;
  text-align: right;
  text-decoration: none; }
  .lineup .more:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }

.streetfaire-main {
  background: #fff;
  margin: 0;
  padding: 1em;
  position: relative; }
  .streetfaire-main:before, .streetfaire-main:after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: 0;
    bottom: 0;
    width: 100vw;
    background: #fff;
    backdrop-filter: blur(2px);
    opacity: calc(1 - 1.2 * var(--scroll));
    z-index: -1; }

.intro p {
  position: relative; }
  .intro p:before, .intro p:after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    top: 0;
    bottom: 0;
    width: 100vw;
    background: inherit;
    z-index: -1; }
  .intro p:after {
    clip-path: polygon(0 0.5rem, calc(50% - 3rem) 0.5rem, 50% 1.5rem, calc(50% + 3rem) 0.5rem, 100% 0.5rem, 100% 100%, 0 100%);
    bottom: -1px;
    background: var(--weekly);
    opacity: .15; }
    @media (min-width: 65rem) {
      .intro p:after {
        clip-path: polygon(0 0.5rem, calc(50% - 5rem) 0.5rem, 50% 2.5rem, calc(50% + 5rem) 0.5rem, 100% 0.5rem, 100% 100%, 0 100%); } }
  .intro p ~ p:after {
    clip-path: unset; }

.sf20260612,
.lineup li:first-child {
  --weekly: var(--week1); }

.sf20260619,
.lineup li:nth-child(2) {
  --weekly: var(--week2); }

.sf20260626,
.lineup li:nth-child(3) {
  --weekly: var(--week3); }

.sf20260710,
.lineup li:nth-child(4) {
  --weekly: var(--week4); }

.sf20260717,
.lineup li:nth-child(5) {
  --weekly: var(--week5); }

.sf20260724,
.lineup li:nth-child(6) {
  --weekly: var(--week6); }

.sf20260731,
.lineup li:nth-child(7) {
  --weekly: var(--week7); }

.sf20260807,
.lineup li:nth-child(8) {
  --weekly: var(--week8); }

@media (min-width: 65rem) {
  .streetfaire-main .sponsors {
    width: 20rem;
    margin-left: 2rem; } }

.sponsorlist {
  background: var(--weekly);
  padding: 3rem 0; }
  .sponsorlist a {
    border-radius: 0;
    transition: .2s all; }
    .sponsorlist a:hover {
      background: rgba(0, 0, 0, 0.7); }

.street-faire .wp-site-blocks > main + .wp-block-template-part {
  margin: 0 2rem; }

.footer-signup {
  position: relative;
  background: var(--weekly) !important;
  --fsb-color-primary: #fff;
  --wp--preset--color--primary: #fff;
  border: 2px solid;
  margin: Max(14vw, 18rem); }
  .footer-signup .form_dd_signup button {
    color: var(--weekly); }

.fsb-downtowndialogue:after {
  content: '';
  display: block;
  position: absolute;
  top: -20px;
  left: calc(50% - 32px);
  z-index: -1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--fsb-color-primary); }

footer.wp-block-template-part {
  background: var(--weekly); }
  .sf20260612 footer.wp-block-template-part figure, .sf20260619 footer.wp-block-template-part figure, .sf20260626 footer.wp-block-template-part figure {
    filter: brightness(1.25); }