@font-face {
   font-family: "Libre Baskerville";
   src: url("assets/libre-baskerville.woff2") format("woff2");
   font-style: normal;
   font-weight: 400;
   font-display: swap;
}
 @font-face {
   font-family: "Libre Baskerville";
   src: url("assets/libre-baskerville-italic.woff2") format("woff2");
   font-style: italic;
   font-weight: 400;
   font-display: swap;
}
 @font-face {
   font-family: "Lato";
   src: url("assets/fonts/lato/lato-300.woff2") format("woff2");
   font-style: normal;
   font-weight: 300;
   font-display: swap;
}
 @font-face {
   font-family: "Lato";
   src: url("assets/fonts/lato/lato-400.woff2") format("woff2");
   font-style: normal;
   font-weight: 400;
   font-display: swap;
}
 :root {
   --ink: #11110f;
   --paper: #e8e5df;
   --sage: #4e594a;
   --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
   --sans: "Lato", Arial, Helvetica, sans-serif;
}
 * {
   box-sizing: border-box;
}
 html {
   background: #efefef;
   scroll-behavior: smooth;
}
 body {
   margin: 0;
   color: var(--ink);
   font-family: var(--sans);
   font-weight: 300;
   background: var(--paper);
}
 a {
   color: inherit;
}
 img {
   display: block;
   max-width: 100%;
}
 .skip-link {
   position: fixed;
   top: -3rem;
   left: 1rem;
   z-index: 100;
   background: white;
   padding: .75rem 1rem;
}
 .skip-link:focus {
   top: 1rem;
}
 .site-header {
   position: absolute;
   inset: 0 0 auto 0;
   min-height: 41px;
   z-index: 20;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   padding: 2vw;
   color: #f5f5f5;
   font-size: 1.1rem;
   line-height: 1;
   letter-spacing: 0;
}
 .site-header::before {
   content: "";
   position: absolute;
   z-index: -1;
   inset: 0 0 -56px;
   background: linear-gradient(to bottom, rgba(13, 11, 4, .468) 0%, rgba(13, 11, 4, .28) 48%, rgba(13, 11, 4, 0) 100%);
   pointer-events: none;
}
 .site-header.dark {
   color: #f5f5f5;
}
 .nav, .socials {
   display: flex;
   align-items: center;
   gap: .8rem;
}
 .nav a, .socials a {
   text-decoration: none;
   opacity: .9;
}
 .nav a:hover, .socials a:hover {
   opacity: .55;
}
 .socials {
   justify-content: flex-end;
   gap: .18rem;
}
 .socials a {
   display: grid;
   place-items: center;
   width: 31px;
   height: 31px;
   border: 0;
   color: inherit;
}
 .socials svg {
   width: 31px;
   height: 31px;
   display: block;
   fill: currentColor;
}
 .brand {
   width: 46px;
   height: 37px;
   overflow: hidden;
   display: grid;
   place-items: center;
}
 .brand img {
   width: 44px;
   height: 44px;
   object-fit: contain;
}
 .menu-toggle {
   display: none;
   width: 40px;
   height: 40px;
   padding: 6px;
   border: 0;
   background: none;
   color: inherit;
   cursor: pointer;
}
 .menu-toggle svg {
   width: 28px;
   height: 28px;
   display: block;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.75;
   stroke-linecap: square;
}
 .hero {
   position: relative;
   min-height: 100svh;
   background: #777 center/cover no-repeat;
   overflow: hidden;
}
 .hero::after {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(12,12,10,.08);
   pointer-events: none;
}
 .home-hero {
   background-image: url("assets/home.webp");
   background-position: center 90%;
}
 .home-copy {
   position: absolute;
   z-index: 2;
   top: 11%;
   left: 50%;
   transform: translateX(-50%);
   text-align: center;
   width: min(420px, 70%);
}
 .home-copy h1 {
   margin: 0 0 1rem;
   font: italic 2.2rem/1.4 var(--serif);
   letter-spacing: 0;
}
 .outline-button {
   display: inline-block;
   color: hsl(40 7.83% 45.1%);
   border: 2px solid currentColor;
   padding: .85rem 2.4rem;
   text-decoration: none;
   font-size: 1.1rem;
   font-weight: 400;
   transition: .2s;
}
 .outline-button:hover {
   background: hsl(40 7.83% 45.1%);
   color: hsl(0 0% 96.08%);
}
 .eyes-strip {
   height: 96px;
   background: url("assets/eyes.webp") center 49%/cover no-repeat;
   filter: grayscale(1);
}
 .page-hero {
   min-height: 100svh;
   color: #f5f5f5;
   display: grid;
   place-items: center;
}
 .page-hero .content {
   position: relative;
   z-index: 2;
   width: min(1100px, 84vw);
}
 .page-hero h1 {
   margin: 0 0 1rem;
   font: 400 2.5rem/1.1 var(--serif);
}
 .page-hero p {
   line-height: 1.75;
}
 .shows {
   background-image: linear-gradient(rgba(10,9,12,.22),rgba(10,9,12,.22)), url("assets/shows.webp");
}
 .shows .content {
   max-width: 920px;
}
 .shows p {
   opacity: .85;
}
 .about {
   min-height: 100svh;
   padding: 120px 8vw 70px;
   background: #d7d0c7 url("assets/about-bg.webp") center/cover no-repeat;
   color: #f5f5f5;
}
 .about-layout {
   width: min(1180px,100%);
   margin: auto;
   display: grid;
   grid-template-columns: .95fr 1.05fr;
   gap: clamp(2rem,7vw,7rem);
   align-items: stretch;
}
 .about-portrait-frame {
   position: relative;
   min-height: 0;
}
 .about-portrait {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
}
 .about-copy {
   max-width: 520px;
   background: #0004;
   padding: 1rem;
}
 .about-copy h1 {
   font: 400 3.53rem/1 var(--serif);
   margin: 0 0 2.5rem;
}
 .about-copy p {
   font-size: 1.25rem;
   line-height: 2;
   text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
 .contact {
   min-height: 100svh;
   padding: 130px 8vw 80px;
   background: linear-gradient(rgba(8,8,8,.34),rgba(8,8,8,.34)), url("assets/contact.webp") center/cover no-repeat;
   color: #f5f5f5;
}
 .contact-layout {
   width: min(1200px,100%);
   margin: auto;
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: clamp(2rem,7vw,8rem);
}
 .contact-content {
   background: #0004;
   padding: 1rem;
}
 .contact h1 {
   font: 400 2.6rem/1 var(--serif);
   margin: 0 0 2rem;
}
 .contact a {
   text-decoration: none;
   font-size: .92rem;
}
 .contact-form {
   display: grid;
   gap: 1.2rem;
}
 .name-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
}
 label {
   display: grid;
   gap: .45rem;
   font-size: .76rem;
}
 input, textarea {
   width: 100%;
   border: 0;
   background: rgba(255,255,255,.95);
   padding: .85rem;
   font: 1rem var(--sans);
   border-radius: 0;
}
 textarea {
   min-height: 150px;
   resize: vertical;
}
 button[type="submit"] {
   justify-self: start;
   color: #f5f5f5;
   background: transparent;
   border: 1px solid rgba(255,255,255,.6);
   padding: .8rem 2.2rem;
   cursor: pointer;
}
 .form-note {
   min-height: 1.2em;
   font-size: .8rem;
}
 .notfound {
   min-height: 100svh;
   padding: 130px 8vw 80px;
   background: linear-gradient(rgba(8,8,8,.34),rgba(8,8,8,.34)), url("assets/about-bg.webp") center/cover no-repeat;
   color: #f5f5f5;
}
 /*.notfound-layout {
   width: min(1200px,100%);
   margin: auto;
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: clamp(2rem,7vw,8rem);
}*/
 .notfound-content {
  /* background: #0004;
   padding: 1rem;*/
   text-align: center;
}
 .notfound h1 {
   font: 400 2.6rem/1 var(--serif);
   margin: 0 0 2rem;
}
 .notfound a {
   text-decoration: none;
   font-size: .92rem;
}
 .press {
   background: #e4e1dc;
}
 .press-intro {
   position: relative;
   min-height: max(100svh, 1120px);
   color: #f5f5f5;
   background: url("assets/press-hero.webp") center/cover no-repeat;
   overflow: hidden;
}
 .press-intro::before {
   content: "LVA LVA LVA LVA";
   position: absolute;
   top: 18%;
   left: -3%;
   white-space: nowrap;
   font: 400 clamp(4rem,10vw,9rem)/1 var(--serif);
   letter-spacing: .12em;
   opacity: .9;
   transform: rotate(-4deg);
}
 .spotify-player {
   position: absolute;
   z-index: 2;
   top: 28%;
   left: 50%;
   width: min(420px, calc(100% - 2rem));
   height: 380px;
   border: 0;
   border-radius: 12px;
   transform: translateX(-50%);
 }
 .quotes {
   position: absolute;
   z-index: 2;
   inset: auto 6vw 9vh 6vw;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   align-items: end;
}
 blockquote {
   margin: 0;
   background: rgba(248,248,246,.96);
   color: #31342f;
   border-radius: 28px;
   padding: 1.5rem;
   font: 1.25rem var(--sans);
   font-weight: 300;
   line-height: 1.75;
   max-width: 360px;
}
 blockquote:last-child {
   justify-self: end;
}
 blockquote cite {
   display: block;
   margin-top: .75rem;
   font-size: .8rem;
   font-style: normal;
}
 .press-bio {
   min-height: 100svh;
   padding: 110px 7vw 70px;
   color: #f5f5f5;
   background: url("assets/press-bio.webp") center/cover no-repeat;
   display: grid;
   grid-template-columns: .95fr 1.05fr;
   gap: clamp(2rem,7vw,7rem);
   align-items: stretch;
}
.bio-content {
}
.press-bio-image {
   position: relative;
   display: flex;
   flex-direction: column;
}
.press-bio-image-frame {
   height: 100%;
}

.press-bio-image-portrait {
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
   border-radius: 999px;
}

.press-bio h2 {
   font: 400 clamp(2.8rem,6vw,5.2rem)/1 var(--serif);
   margin: 0 0 1.8rem;
}
 .bio-card {
   background: rgba(248,248,246,.96);
   color: #323630;
   padding: 1.5rem;
   border-radius: 24px;
   font-size: 1.25rem;
   line-height: 1.75;
}
 .press-socials {
   margin-top: 1.3rem;
   display: flex;
   gap: .6rem;
   justify-content: center;
}
 .press-socials a {
   display: grid;
   place-items: center;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   color: #111;
   background: white;
   text-decoration: none;
   font-size: .66rem;
   font-weight: 700;
}
 .press-socials svg {
   width: 29px;
   height: 29px;
   display: block;
   fill: currentColor;
}
 .press-contact {
   padding: 100px 7vw;
   background: var(--sage);
   color: #f5f5f5;
}
 .press-contact h2 {
   font: 400 clamp(3.5rem,9vw,8rem)/.8 var(--serif);
   margin: 0 0 3rem;
   white-space: nowrap;
   letter-spacing: .03em;
}
 .press-contact-grid {
   display: grid;
   grid-template-columns: 1fr .8fr;
   gap: 4rem;
   align-items: start;
}
 .press-contact img {
   width: 100%;
   max-height: 620px;
   object-fit: cover;
   border-radius: 38px;
}
 .gallery {
   padding: 5vw;
   display: grid;
   grid-template-columns: repeat(3,1fr);
   gap: 1rem;
   background: #d7d0c7;
}
 .gallery img {
   width: 100%;
   height: 34vw;
   max-height: 520px;
   object-fit: cover;
}
 @media (max-width: 760px) {
   .site-header {
     min-height: 62px;
     padding: 1rem;
     grid-template-columns: 1fr 1fr;
     font-size: 1rem;
  }
   .nav {
     position: fixed;
     z-index: 25;
     inset: 0;
     padding: 5rem 1rem;
     background: rgba(20,20,18,.96);
     color: #f5f5f5;
     flex-direction: column;
     align-items: flex-end;
     justify-content: center;
     text-align: right;
     font: 400 1.6rem/1.2 var(--sans);
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: opacity .18s ease, visibility 0s linear .18s;
  }
   body.menu-open {
     overflow: hidden;
  }
   body.menu-closed .nav {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: none;
  }
   body.menu-open .nav {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
     transition-delay: 0s;
  }
   .menu-toggle {
     display: grid;
     place-items: center;
     position: relative;
     z-index: 30;
     grid-column: 2;
     grid-row: 1;
     justify-self: end;
  }
   .brand {
     position: relative;
     z-index: 30;
     grid-column: 1;
     grid-row: 1;
     justify-self: start;
     width: 38px;
  }
   body.menu-open .brand img {
     filter: invert(1);
  }
   .socials {
     display: flex;
     position: fixed;
     z-index: 30;
     right: 1rem;
     bottom: 1.25rem;
     justify-content: flex-end;
     gap: .18rem;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: opacity .18s ease, visibility 0s linear .18s;
  }
   body.menu-closed .socials {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: none;
  }
   body.menu-open .socials {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
     transition-delay: 0s;
  }
   .home-hero {
     min-height: 100svh;
     background-position: 50% 78%;
  }
   .home-copy {
     top: 12%;
     width: 74%;
  }
   .home-copy h1 {
     font-size: 1.9rem;
  }
   .page-hero {
     min-height: 82svh;
  }
   .page-hero h1 {
     font-size: 2rem;
  }
   .about {
     padding: 90px 1rem 2rem;
     background-image: url("assets/about-narrow-bg.webp");
  }
   .about-layout {
     grid-template-columns: 1fr;
     gap: 1.5rem;
  }
   .about-copy {
     order: 1;
     max-width: none;
  }
   .about-portrait-frame {
     order: 2;
     height: 52svh;
  }
   .about-copy h1 {
     margin-bottom: 1.3rem;
  }
   .contact {
     padding: 100px 1rem 2rem;
  }
   .contact-layout {
     grid-template-columns: 1fr;
     gap: 2rem;
  }
   .name-row {
     grid-template-columns: 1fr;
  }
   .press-intro {
     min-height: 1600px;
  }
   .press-intro::before {
     top: 12%;
     font-size: 4rem;
  }
   .spotify-player {
     top: 18%;
     width: calc(100% - 2rem);
   }
  .press-bio {
    display: block;
  }
   .quotes {
     inset: 48% 1rem auto;
     grid-template-columns: 1fr;
  }
   blockquote, blockquote:last-child {
     justify-self: auto;
     max-width: 90%;
  }
   blockquote:last-child {
     margin-left: auto;
  }
   .press-bio {
     padding: 90px 1rem 50px;
  }
   .press-bio-image {
     margin-top: 1rem;
  }
   .press-contact {
     padding: 80px 1rem;
  }
   .press-contact h2 {
     white-space: normal;
  }
   .press-contact-grid {
     grid-template-columns: 1fr;
     gap: 2rem;
  }
   .gallery {
     grid-template-columns: 1fr 1fr;
     padding: .65rem;
     gap: .65rem;
  }
   .gallery img {
     height: 65vw;
  }
}
 @media (prefers-reduced-motion: reduce) {
   * {
     scroll-behavior: auto !important;
     transition: none !important;
  }
}
