:root {
  color-scheme:dark;
  --ink:#121311;
  --paper:#e8e9e2;
  --accent:#ff684b;
  --muted:#a2a49c;
  --line:#3d3f38;
  --pad:clamp(24px,5vw,100px);
  --display:'Barlow Condensed',Impact,sans-serif;
  --body:'DM Sans',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1)
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0
}

html {
  background:var(--ink);
  scroll-behavior:smooth;
  scroll-padding-top:78px
}

body {
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

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

h1,h2,h3 {
  font-weight:600
}

h2,h3 {
  font-family:var(--display)
}

h2 {
  min-width:0;
  overflow-wrap:anywhere
}

.story-grid>*,.sound-layout>*,.contact-details>* {
  min-width:0
}

a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}

::selection {
  background:var(--accent);
  color:var(--ink)
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}

.skip {
  position:fixed;
  left:16px;
  top:12px;
  z-index:100;
  background:var(--paper);
  color:var(--ink);
  padding:14px 22px;
  transform:translateY(-200%)
}

.skip:focus {
  transform:none
}

.site-header {
  position:fixed;
  z-index:30;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:20px var(--pad);
  background:var(--ink);
  border-bottom:1px solid #ffffff0b
}

.brand {
  font-size:1.65rem;
  font-weight:600;
  letter-spacing:-.09em;
  line-height:1
}

.brand span {
  color:var(--accent)
}

nav {
  display:flex;
  align-items:center;
  gap:36px
}

nav a {
  font-size:.875rem
}

nav a:hover {
  color:var(--accent)
}

nav a:last-child {
  margin-left:35px
}

.menu-toggle {
  display:none
}

.hero {
  height:max(700px,100svh);
  max-height:1250px;
  position:relative;
  isolation:isolate;
  overflow:hidden
}

.hero-label {
  position:absolute;
  top:30%;
  left:var(--pad);
  display:grid;
  font-size:.875rem;
  color:var(--muted);
  line-height:1.5
}

.hero-portrait {
  position:absolute;
  right:24%;
  top:clamp(112px,16svh,190px);
  bottom:136px;
  width:52%;
  overflow:hidden;
  border:1px solid #ffffff14;
  z-index:-1
}

.hero-portrait>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 70%;
  filter:grayscale(1) contrast(1.08);
  position:relative
}


.hero-listen {
  position:absolute;
  right:var(--pad);
  top:48%;
  border:1px solid var(--accent);
  color:var(--accent);
  width:118px;
  height:118px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:.75rem;
  line-height:1.3;
  text-align:center;
  transition:background .25s,color .25s
}

.hero-listen-icon {
  display:block;
  width:30px;
  height:18px;
  flex-shrink:0;
  fill:currentColor
}

.hero-listen:hover {
  color:var(--ink);
  background:var(--accent)
}

.hero-footer {
  position:absolute;
  bottom:24px;
  left:var(--pad);
  right:var(--pad);
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase
}

.hero-footer>p>span {
  color:var(--muted)
}

.hero-footer>a {
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  min-width:270px;
  border-top:1px solid var(--accent);
  padding-top:12px
}

.hero-footer .next-label {
  grid-column:1/-1;
  color:var(--accent);
  font-size:.75rem
}

.hero-footer>a>span:nth-child(2) {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-size:1rem;
  letter-spacing:0
}

.hero-footer b {
  font-weight:500
}

.hero-genres {
  text-align:right
}

.section-marker {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:70px
}

.section-marker h2 {
  font:inherit
}

.light-section {
  background:var(--paper);
  color:var(--ink);
  color-scheme:light
}

.sound {
  padding:65px var(--pad) 105px
}

.sound-layout {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:8vw;
  align-items:center
}

.sound-photo {
  position:relative;
  align-self:stretch;
  min-height:660px;
  overflow:hidden
}

.sound-photo>img {
  position:absolute;
  inset:0;
  height:100%;
  width:100%;
  object-fit:cover;
  filter:grayscale(1);
  object-position:50% 48%
}

.sound-photo::after {
  content:'';
  position:absolute;
  inset:60% 0 0;
  background:linear-gradient(transparent,#000b);
  pointer-events:none
}

.photo-caption {
  position:absolute;
  z-index:2;
  bottom:25px;
  left:25px;
  right:25px;
  color:var(--paper);
  font-size:.75rem
}

.sound-copy h2 {
  font-size:clamp(4.5rem,8.1vw,9.5rem);
  line-height:.84;
  letter-spacing:-.025em;
  margin-bottom:32px
}

.sound-copy h2>span {
  color:var(--paper);
  -webkit-text-stroke:1.5px var(--ink)
}

.sound-copy>p {
  font-size:1rem;
  line-height:1.6
}

.sound-links {
  margin-top:36px;
  border-top:1px solid #93958e
}

.sound-links>a {
  display:grid;
  grid-template-columns:2ch minmax(0,1fr);
  align-items:center;
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid #93958e;
  font-size:1.15rem;
  line-height:1.3;
  transition:color .25s
}

.sound-links>a:hover {
  color:#a52d18
}

.sound-links small {
  display:block;
  font-size:.875rem;
  color:#55594f;
  margin-top:5px
}

.item-no {
  font-size:.75rem;
  color:#55594f
}

.release-line>span {
  min-width:0;
  overflow-wrap:anywhere
}

.release-line {
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:.875rem;
  margin-top:28px
}

.release-line>span:first-child,.release-type {
  color:#55594f
}

.release-type {
  margin-left:10px
}

.upcoming {
  padding:60px var(--pad) 0;
  position:relative
}

.upcoming .section-marker {
  color:var(--accent);
  margin-bottom:30px
}

.next-show {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  align-items:center;
  gap:5vw;
  padding:0 0 70px;
  position:relative
}

.show-date {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px
}

.date-day {
  font:600 clamp(13rem,28vw,34rem)/.9 var(--display);
  letter-spacing:-.03em
}

.date-rest {
  font-size:1.125rem;
  line-height:1.5;
  transform:rotate(-90deg);
  white-space:nowrap;
  margin-left:-30px
}

.date-rest>span {
  font-size:.75rem;
  color:var(--muted)
}

.show-room {
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:26px
}

.show-room>p {
  font-size:.75rem;
  text-transform:uppercase;
  color:var(--muted);
  letter-spacing:.1em
}

.show-room h3 {
  margin:24px 0;
  line-height:1
}

.show-room>span {
  color:var(--muted);
  font-size:.875rem
}

.archive-jump {
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding:26px 0;
  border-block:1px solid var(--line);
  font-size:.875rem
}

.archive-jump>span:first-child {
  color:var(--muted)
}

.archive-jump:hover>span:last-child {
  color:var(--accent)
}

.archive {
  padding:90px 0 100px;
  overflow:hidden
}

.archive>.section-marker,.archive-heading {
  margin-left:var(--pad);
  margin-right:var(--pad)
}

.archive-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin-bottom:46px
}

.archive-heading h2 {
  font-size:clamp(4rem,8vw,10rem);
  line-height:.85;
  letter-spacing:-.025em
}

.archive-heading h2 br {
  display:none
}

.archive-heading h2>span {
  color:transparent;
  -webkit-text-stroke:1px var(--paper)
}

.gallery {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:32px 20px;
  margin:0 var(--pad)
}

.show {
  min-width:0
}

.show-kicker {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  border-top:1px solid var(--line);
  padding:12px 0;
  font-size:.75rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:var(--muted)
}

.show-number {
  color:var(--accent)
}

.show-art {
  display:block;
  position:relative;
  padding:8px;
  border:1px solid #393d33;
  background:#1c1f19;
  transition:transform .5s var(--ease),border-color .4s
}

.show-art:hover,.show-art:focus-visible {
  transform:translateY(-4px);
  border-color:#a2a49c
}

.show-art img {
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:contain
}

.show-details {
  padding:18px 0;
  border-bottom:1px solid var(--line)
}

.show h3 {
  font-size:clamp(1.35rem,1.7vw,1.8rem);
  line-height:1.1;
  min-height:2.2em;
  letter-spacing:0;
  text-transform:uppercase;
  margin-bottom:10px
}

.show-details>p {
  font-size:.875rem;
  line-height:1.45;
  min-height:2.9em;
  color:var(--paper)
}

.show-location {
  display:block;
  margin-top:7px;
  font-size:.75rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted)
}

.archive-label {
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted)
}

.venue-logo {
  width:clamp(200px,22vw,280px);
  height:auto;
  max-width:100%
}

.story + .sound {
  border-top:1px solid #b5b9ae
}

.story {
  padding:65px var(--pad) 70px
}

.story-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:11vw;
  align-items:start
}

.story h2 {
  font-size:clamp(6rem,14vw,17rem);
  letter-spacing:-.025em;
  line-height:.79
}

.story h2>span {
  -webkit-text-stroke:1.5px var(--ink);
  color:transparent
}

.headline-dot {
  color:var(--accent);
  -webkit-text-stroke:0
}

.story-copy {
  padding-top:12px
}

.story-copy>p {
  font-size:1rem;
  line-height:1.75;
  color:#42473e
}

.story-copy>p+p {
  margin-top:28px
}

.story-copy .story-lead {
  font-size:clamp(1.4rem,2.3vw,2.25rem);
  line-height:1.4;
  color:var(--ink);
  letter-spacing:-.035em;
  margin-bottom:40px
}

.story-facts {
  display:grid;
  grid-template-columns:1fr 1fr 1.4fr;
  gap:40px;
  margin-top:85px;
  border-top:1px solid #969b90;
  padding-top:30px
}

.story-facts dt {
  font-size:.75rem;
  color:#55594f;
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:12px
}

.story-facts dd {
  font-size:1rem
}

.contact {
  padding:65px var(--pad) 95px
}

.contact .section-marker {
  margin-bottom:50px
}

.contact-main {
  display:block;
  position:relative;
  padding-bottom:45px
}

.contact-main h2 {
  font-size:clamp(7rem,20vw,25rem);
  line-height:.79;
  letter-spacing:-.035em
}

.contact-main h2>span {
  color:var(--accent)
}

.contact-link-label {
  position:absolute;
  right:0;
  bottom:35px;
  text-transform:uppercase;
  font-size:.875rem;
  letter-spacing:.1em
}

.contact-details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  border-top:1px solid var(--line);
  padding-top:32px;
  font-size:1rem
}

.contact-details>p {
  color:var(--muted)
}

.contact-details>div {
  display:flex;
  flex-direction:column;
  gap:13px;
  align-items:flex-end;
  justify-self:end;
  max-width:100%;
  text-align:right
}

.contact-details a {
  overflow-wrap:anywhere
}

.contact-details a:hover {
  color:var(--accent)
}

footer {
  margin:0 var(--pad);
  padding:35px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}

footer>div {
  display:flex;
  gap:30px;
  font-size:.875rem
}

footer>span {
  font-size:.75rem;
  color:var(--muted)
}

footer a:hover {
  color:var(--accent)
}

.art-dialog {
  position:fixed;
  inset:0;
  margin:auto;
  width:min(750px,calc(100% - 32px));
  max-height:calc(100svh - 32px);
  background:var(--ink);
  color:var(--paper);
  padding:20px;
  border:1px solid var(--line)
}

.art-dialog::backdrop {
  background:#000e
}

.dialog-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:15px
}

.dialog-heading h2 {
  font:400 1rem/1.4 var(--body)
}

.dialog-close {
  background:transparent;
  border:0;
  min-height:44px;
  padding:0 8px;
  white-space:nowrap;
  font-size:.875rem
}

#art-image {
  width:100%;
  height:auto;
  max-height:calc(100svh - 145px);
  object-fit:contain
}

body.modal-open {
  overflow:hidden
}

.reveal {
  transition:opacity .8s var(--ease),transform .8s var(--ease)
}

.reveal:not(.visible) {
  opacity:0;
  transform:translateY(25px)
}

@media(min-width:1600px) {
  .hero-listen {
    width:150px;
    height:150px;
    font-size:.875rem
  }
}

@media(max-width:1199px) and (min-width:701px) {
  .gallery {grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
}

@media(max-width:1000px) {
  nav {
    gap:24px
  }
  nav a:last-child {
    margin-left:0
  }
  .hero-label {
    top:106px
  }
  .hero-listen {
    width:95px;
    height:95px;
    top:58%
  }
  .hero-portrait {
    width:60%;
    right:24%;
    top:170px;
    bottom:128px
  }
  .hero-genres {
    display:none
  }
  .hero-footer>a {
    min-width:230px
  }
  .sound-layout {
    gap:5vw
  }
  .sound-photo {
    min-height:620px
  }
  .sound-copy h2 {
    font-size:clamp(4.2rem,8.6vw,7rem)
  }
  .sound-links>a {
    grid-template-columns:2ch minmax(0,1fr);
    gap:12px;
    font-size:1rem
  }
  .next-show {
    grid-template-columns:1.2fr 1fr;
    gap:4vw
  }
  .date-rest {
    margin-left:-70px
  }
  .story-grid {
    gap:6vw
  }
  .story-copy .story-lead {
    font-size:1.5rem
  }
  .story-facts {
    gap:25px
  }
  .contact-details {
    grid-template-columns:1fr 1.2fr;
    gap:30px
  }
}

@media(max-width:700px) {
  :root {
    --pad:24px
  }
  .site-header {
    flex-wrap:wrap;
    padding-top:19px;
    padding-bottom:19px
  }
  .brand {
    font-size:1.4rem
  }
  .menu-toggle {
    display:flex;
    align-items:center;
    gap:20px;
    min-height:40px;
    border:0;
    background:none;
    font-size:.875rem
  }
  nav {
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    padding:20px var(--pad) 35px;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    max-height:calc(100svh - 80px);
    overflow-y:auto
  }
  .js nav {
    display:none
  }
  .js nav.open {
    display:flex
  }
  nav a {
    font-family:var(--display);
    font-size:2.5rem;
    text-transform:uppercase;
    padding:7px 0
  }
  nav a:last-child {
    color:var(--accent)
  }
  .hero {
    height:max(780px,100svh);
    max-height:1050px
  }
  .hero-label {
    top:115px;
    font-size:.75rem
  }
  .hero-portrait {
    top:184px;
    bottom:232px;
    left:var(--pad);
    right:var(--pad);
    width:auto
  }
  .hero-listen {
    top:auto;
    bottom:140px;
    left:auto;
    right:var(--pad);
    background:var(--ink);
    width:77px;
    height:77px;
    font-size:.75rem
  }
  .hero-footer {
    bottom:24px;
    gap:18px
  }
  .hero-footer>p {
    font-size:.75rem;
    letter-spacing:0
  }
  .hero-footer>a {
    min-width:0;
    grid-template-columns:1fr;
    gap:6px 18px;
    width:52%;
    padding-top:10px
  }
  .hero-footer>a>span:nth-child(2) {
    font-size:.875rem;
    gap:18px
  }
  .hero-footer .next-label {
    font-size:.75rem
  }
  .section-marker {
    margin-bottom:38px;
    gap:20px;
    font-size:.75rem;
    letter-spacing:.04em
  }
  .section-marker>span:last-child {
    text-align:right
  }
  .sound {
    padding-top:38px;
    padding-bottom:60px
  }
  .sound-layout {
    display:flex;
    flex-direction:column-reverse;
    gap:44px
  }
  .sound-copy {
    width:100%
  }
  .sound-copy h2 {
    font-size:clamp(3.5rem,17.5vw,7.5rem);
    line-height:.85;
    margin-bottom:25px
  }
  .sound-copy h2 br:nth-of-type(2) {
    display:none
  }
  .sound-copy h2>span {
    margin-left:10px
  }
  .sound-copy>p {
    font-size:1rem
  }
  .sound-links>a {
    font-size:1.1rem;
    padding:20px 0;
    grid-template-columns:2ch minmax(0,1fr);
    gap:12px
  }
  .release-line {
    font-size:.875rem
  }
  .sound-photo {
    width:100%;
    min-height:0;
    height:450px
  }
  .photo-caption {
    left:20px;
    bottom:20px
  }
  .upcoming {
    padding-top:40px
  }
  .next-show {
    display:block;
    padding-bottom:38px
  }
  .show-date {
    gap:25px
  }
  .date-day {
    font-size:clamp(11rem,55vw,18rem)
  }
  .date-rest {
    transform:none;
    margin-left:0;
    font-size:1rem;
    white-space:normal
  }
  .date-rest>span {
    display:block;
    margin-top:8px;
    font-size:.75rem
  }
  .show-room {
    margin-top:30px;
    padding-top:20px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:12px 20px
  }
  .show-room>p {
    flex-basis:100%
  }
  .show-room h3 {
    flex-basis:100%;
    margin:12px 0
  }
  .show-room>span {
    font-size:1rem
  }
  .archive-jump {
    font-size:.875rem;
    gap:20px
  }
  .archive-jump>span {
    max-width:48%
  }
  .archive {
    padding-top:55px;
    padding-bottom:55px
  }
  .archive-heading {
    align-items:end;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:30px
  }
  .archive-heading h2 {
    font-size:clamp(2.7rem,14vw,6rem)
  }
  .archive-heading h2 br {
    display:block
  }
  .gallery {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 16px
  }

  .show-art {
    padding:6px
  }
  .show h3 {
    font-size:clamp(1.3rem,5.5vw,1.8rem)
  }
  .show-details {
    padding-top:20px
  }
  .story {
    padding-top:40px;
    padding-bottom:45px
  }
  .story-grid {
    grid-template-columns:minmax(0,1fr);
    gap:45px
  }
  .story h2 {
    font-size:clamp(3.5rem,24vw,10rem);
    line-height:.82
  }
  .story h2 {
    max-width:400px
  }
  .story h2>span {
    display:block
  }
  .story-copy {
    padding-top:0
  }
  .story-copy .story-lead {
    font-size:1.6rem;
    margin-bottom:30px
  }
  .story-copy>p {
    font-size:1rem
  }
  .story-facts {
    grid-template-columns:1fr;
    margin-top:45px;
    padding-top:0;
    gap:0
  }
  .story-facts>div {
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:20px;
    border-bottom:1px solid #969b90;
    padding:20px 0
  }
  .story-facts dt {
    margin:0
  }
  .story-facts dd {
    font-size:.875rem
  }
  .contact {
    padding-top:40px;
    padding-bottom:55px
  }
  .contact .section-marker>span:last-child {
    max-width:40%
  }
  .contact .section-marker {
    margin-bottom:45px
  }
  .contact-main {
    padding-bottom:64px
  }
  .contact-main h2 {
    font-size:clamp(4rem,30vw,13rem)
  }
  .contact-link-label {
    font-size:.75rem;
    bottom:20px;
    right:0
  }
  .contact-details {
    grid-template-columns:minmax(0,1fr);
    gap:25px;
    font-size:.875rem
  }
  .contact-details>div {
    gap:18px
  }
  footer {
    display:flex;
    flex-wrap:wrap;
    gap:25px
  }
  footer>div {
    margin-left:auto;
    flex-direction:column;
    align-items:end;
    gap:12px;
    font-size:.75rem
  }
  footer>span {
    flex-basis:100%
  }
  .dialog-heading {
    gap:15px
  }
  .dialog-heading h2 {
    font-size:.875rem
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .reveal:not(.visible) {
    opacity:1;
    transform:none
  }
  .name-first,.name-last {
    transform:none!important
  }
}