@font-face {
          font-family: "Onest";
          src: url("fonts/Onest.woff") format("woff");
          font-style: normal;
          font-weight: 100 900;
          font-display: swap;
      }

      @font-face {
          font-family: "Tektur";
          src: url("fonts/Tektur.woff") format("woff");
          font-style: normal;
          font-weight: 400 900;
          font-stretch: 75% 100%;
          font-display: swap;
      }

      @font-face {
          font-family: "Cormorant Garamond";
          src: url("fonts/CormorantGaramond-Italic.woff") format("woff");
          font-style: italic;
          font-weight: 300 700;
          font-display: swap;
      }

      :root {
          color-scheme: dark;
          --black: #010101;
          --pink: #ed589f;
          --acid: #dfff00;
          --white: #f7f6f6;
          --grey: #969396;
      }

      * {
          box-sizing: border-box;
      }

      body {
          margin: 0;
          background: var(--black);
          color: var(--white);
          font-family: "Onest", Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
      }

      a {
          color: inherit;
      }

      a:focus-visible,
      button:focus-visible {
          outline: 3px solid var(--acid);
          outline-offset: 4px;
      }

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

      .arrow-icon {
          display: block;
          width: 1.15em;
          height: 1.15em;
          flex: 0 0 auto;
          overflow: visible;
      }

      .wrap {
          width: min(1440px, calc(100% - 48px));
          margin-inline: auto;
      }

      .header {
          min-height: 78px;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      .header-mark {
          width: auto;
          height: 20px;
      }

      .menu-link {
          display: grid;
          width: 44px;
          height: 44px;
          align-content: center;
          justify-items: end;
          gap: 6px;
          text-decoration: none;
      }

      .menu-link span {
          display: block;
          width: 28px;
          height: 3px;
          background: var(--acid);
      }

      .menu-link span:last-child {
          width: 20px;
      }

      .banner {
          position: relative;
          min-height: 170px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          padding: 24px 32px;
          overflow: hidden;
          background: var(--pink);
          color: var(--black);
          text-decoration: none;
      }

      .banner-title {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin: 0;
          max-width: calc(100% - 64px);
          font-weight: 400;
      }

      .banner-script {
          position: relative;
          z-index: 1;
          margin: 0 0 -.72em 2px;
          transform: translateY(-.28em);
          color: var(--white);
          font: italic 600 clamp(32px, 5.2vw, 62px)/.78 "Cormorant Garamond", Georgia, serif;
          letter-spacing: -.045em;
      }

      .banner-main {
          color: var(--black);
          font: 800 clamp(42px, 6.7vw, 76px)/.88 "Onest", sans-serif;
          letter-spacing: -.075em;
      }

      .banner-subline {
          margin: 8px 0 0 4px;
          color: var(--black);
          font: 500 clamp(12px, 1.45vw, 16px)/1 "Onest", sans-serif;
          letter-spacing: .015em;
      }

      .banner-arrow {
          position: absolute;
          right: 28px;
          bottom: 21px;
          width: 32px;
          height: 32px;
          transition: transform .2s ease;
      }

      .banner:hover .banner-arrow {
          transform: translate(4px, -4px);
      }

      .events {
          width: min(100%, 920px);
          margin-inline: auto;
          padding: 44px 0 62px;
      }

      .section-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 18px;
          margin-bottom: 25px;
      }

      .section-head h2 {
          margin: 0;
          font: 700 clamp(34px, 4.6vw, 58px)/1 "Tektur", sans-serif;
          letter-spacing: -.055em;
          text-transform: uppercase;
      }

      .section-head h2 span {
          color: var(--pink);
      }

      .all-events {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          color: var(--acid);
          font-size: clamp(14px, 1.8vw, 21px);
          line-height: 1;
          text-decoration: none;
          text-transform: uppercase;
          white-space: nowrap;
          border: 0;
          padding: 0;
          background: transparent;
          font-family: inherit;
          cursor: pointer;
      }

      .all-events:hover {
          color: var(--pink);
      }

      .all-events .arrow-icon {
          width: 1.2em;
          height: 1.2em;
      }

      .events-note {
          margin: -6px 0 20px;
          padding: 13px 15px;
          border-left: 3px solid var(--pink);
          background: #171517;
          color: var(--white);
          font-size: 14px;
          line-height: 1.45;
      }

      .events-note[hidden] {
          display: none;
      }

      .event-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 32px 24px;
      }

      .event-card {
          min-width: 0;
          display: flex;
          flex-direction: column;
      }

      .event-art {
          position: relative;
          display: block;
          width: 100%;
          aspect-ratio: 4 / 5;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, .7);
          background: #191619;
      }

      .event-art img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .coming-art {
          isolation: isolate;
          container-type: inline-size;
          background: var(--pink);
          color: var(--black);
          text-decoration: none;
      }

      .event-art .coming-art-bg {
          z-index: 0;
          object-fit: contain;
      }

      .coming-art-label {
          position: absolute;
          z-index: 2;
          top: 44%;
          left: 50%;
          transform: translate(-50%, -50%);
          font: 700 clamp(14px, 3.4vw, 32px)/1 "Tektur", sans-serif;
          font-size: clamp(14px, 6.4cqi, 32px);
          letter-spacing: -.065em;
          white-space: nowrap;
      }

      .event-date {
          margin: 17px 0 0;
          color: var(--acid);
          font-size: clamp(14px, 1.5vw, 19px);
          font-weight: 500;
          letter-spacing: .015em;
      }

      .event-title {
          margin: 20px 0 0;
          font-size: clamp(18px, 2.2vw, 28px);
          font-weight: 600;
          line-height: 1.08;
          letter-spacing: -.035em;
          text-transform: uppercase;
      }

      .event-place {
          margin: 13px 0 21px;
          color: var(--grey);
          font-size: clamp(14px, 1.6vw, 19px);
      }

      .ticket-link {
          display: flex;
          min-height: 58px;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          margin-top: auto;
          padding: 0 20px;
          background: var(--acid);
          color: var(--black);
          font-size: clamp(16px, 1.8vw, 22px);
          font-weight: 700;
          line-height: 1;
          text-decoration: none;
          text-transform: uppercase;
          transition: background .2s ease;
      }

      .ticket-link:hover {
          background: var(--pink);
      }

      .ticket-link .arrow-icon {
          width: 1.15em;
          height: 1.15em;
      }

      .footer {
          border-top: 1px solid #464346;
      }

      .footer-inner {
          min-height: 100px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
      }

      .footer-logo {
          width: auto;
          height: 20px;
      }

      .footer-socials {
          display: flex;
          align-items: center;
          gap: 9px;
          color: var(--grey);
          font-size: 17px;
          text-transform: uppercase;
      }

      .footer-socials a {
          text-decoration: none;
      }

      .footer-socials a:hover {
          color: var(--acid);
      }

      .footer-socials .slash {
          color: #5b585b;
      }

      .footer-socials .out {
          width: 1.15em;
          height: 1.15em;
          margin-left: 3px;
          color: var(--acid);
      }

      @media (min-width: 1100px) {
          .header {
              min-height: 94px;
          }

          .banner {
              min-height: 186px;
              padding-left: 40px;
          }

          .banner-arrow {
              right: 32px;
              bottom: 23px;
              width: 36px;
              height: 36px;
          }

          .events {
              padding-top: 58px;
          }
      }

      @media (max-width: 700px) {
          .wrap {
              width: calc(100% - 32px);
          }

          .header {
              min-height: 64px;
          }

          .menu-link {
              width: 40px;
              height: 40px;
              gap: 5px;
          }

          .menu-link span {
              width: 24px;
              height: 2px;
          }

          .menu-link span:last-child {
              width: 17px;
          }

          .banner {
              min-height: 138px;
              padding: 16px 18px;
          }

          .banner-title {
              max-width: calc(100% - 24px);
          }

          .banner-script {
              font-size: clamp(30px, 8vw, 44px);
          }

          .banner-main {
              font-size: clamp(38px, 10vw, 58px);
          }

          .banner-subline {
              margin-top: 6px;
              font-size: clamp(11px, 3.1vw, 13px);
          }

          .banner-arrow {
              right: 12px;
              bottom: 11px;
              width: 26px;
              height: 26px;
          }

          .events {
              padding: 34px 0 44px;
          }

          .section-head {
              margin-bottom: 17px;
              gap: 10px;
          }

          .section-head h2 {
              font-size: clamp(28px, 7vw, 35px);
              letter-spacing: -.055em;
          }

          .all-events {
              gap: 4px;
              font-size: clamp(11px, 3.3vw, 15px);
          }

          .event-grid {
              gap: 24px 10px;
          }

          .event-date {
              margin-top: 10px;
              font-size: clamp(12px, 3.2vw, 15px);
          }

          .event-title {
              margin-top: 11px;
              font-size: clamp(15px, 4.25vw, 20px);
              line-height: 1.1;
          }

          .event-place {
              margin: 9px 0 14px;
              font-size: clamp(12px, 3.4vw, 15px);
          }

          .ticket-link {
              min-height: 46px;
              padding: 0 12px;
              font-size: clamp(14px, 3.9vw, 17px);
          }

          .footer-inner {
              min-height: 72px;
          }

          .footer-socials {
              gap: 7px;
              font-size: 14px;
          }
      }

      @media (max-width: 350px) {
          .wrap {
              width: calc(100% - 24px);
          }

          .banner {
              min-height: 132px;
          }

          .banner-main {
              font-size: 34px;
          }

          .event-grid {
              column-gap: 8px;
          }

          .event-title {
              font-size: 14px;
          }

          .ticket-link {
              padding-inline: 9px;
              font-size: 13px;
          }
      }

      @media (prefers-reduced-motion: reduce) {

          *,
          *::before,
          *::after {
              scroll-behavior: auto !important;
              transition-duration: .01ms !important;
          }
      }