:root {
  --paper: #d5d2c8;
  --ink: #181818;
  --red: #a7351b;
  --u: calc(100vw / 1536);
  --r-vinyl-x: 44.73%;
  --r-vinyl-y: 7.23%;
  --r-vinyl-w: 55.27%;
  --r-vinyl-h: 71.29%;
}
@font-face { font-family: 'League Gothic'; src: url('assets/fonts/league-gothic.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url('assets/fonts/manrope-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url('assets/fonts/manrope-medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Manrope; src: url('assets/fonts/manrope-semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; scrollbar-color: var(--red) var(--paper); }
body { margin: 0; color: var(--ink); font-family: Manrope, sans-serif; background: var(--paper) url('assets/plates/paper.png') repeat; background-size: 260px 260px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
::selection { background: var(--red); color: #fff; }
h1,h2,p { margin: 0; }
.skip-link { position: fixed; z-index: 10; left: 20px; top: -90px; padding: 12px 16px; color: var(--paper); background: var(--ink); }
.skip-link:focus { top: 12px; }
.opening { position: relative; width: 100%; height: calc(804 * var(--u)); overflow: hidden; }
.site-header { position: absolute; z-index: 2; left: calc(47 * var(--u)); right: calc(48 * var(--u)); top: 0; height: calc(64 * var(--u)); border-bottom: 1px solid #77776f; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(10 * var(--u)); }
.wordmark { font-family: 'League Gothic', sans-serif; font-size: calc(36 * var(--u)); line-height: 1; letter-spacing: -.02em; -webkit-text-stroke: calc(.7 * var(--u)) currentColor; text-decoration: none; }
.site-header nav { display: flex; align-items: center; gap: calc(40 * var(--u)); font-size: calc(16 * var(--u)); }
.site-header nav a { text-decoration: none; padding-block: 12px; }
.booking-link { color: var(--red); }
.hero { display: contents; }
h1 { position: absolute; z-index: 1; top: calc(53 * var(--u)); left: calc(57 * var(--u)); font-family: 'League Gothic', sans-serif; font-size: calc(330 * var(--u)); line-height: 1; font-weight: 400; letter-spacing: 0; width: max-content; transform: scaleX(.884); transform-origin: left center; -webkit-text-stroke: calc(6 * var(--u)) currentColor; }
.genres { position: absolute; z-index: 1; left: calc(60 * var(--u)); top: calc(370 * var(--u)); font-family: 'League Gothic', sans-serif; font-size: calc(134 * var(--u)); font-weight: 400; line-height: .79; letter-spacing: 0; transform: scaleX(.902); transform-origin: left center; -webkit-text-stroke: calc(2.9 * var(--u)) currentColor; }
.intro { position: absolute; z-index: 1; left: calc(60 * var(--u)); top: calc(606 * var(--u)); width: calc(457 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.34; }
.hero-links { position: absolute; z-index: 1; top: calc(725 * var(--u)); left: calc(60 * var(--u)); display: flex; gap: calc(56 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.3; }
.text-link { color: var(--red); display: inline-flex; gap: 16px; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: 7px; text-decoration: none; }
.text-link svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; flex-shrink: 0; }
.text-link:hover { border-bottom-width: 2px; padding-bottom: 6px; text-decoration: none; }
.vinyl { position: absolute; left: var(--r-vinyl-x); top: calc(74 * var(--u)); width: var(--r-vinyl-w); height: calc(730 * var(--u)); object-fit: cover; transform-origin: 65% 67%; animation: settle-record 700ms cubic-bezier(.16,1,.3,1) backwards; transition: transform 650ms cubic-bezier(.16,1,.3,1); }
@keyframes settle-record { from { transform: rotate(-.75deg); } to { transform: rotate(0); } }
@media (hover: hover) and (pointer: fine) { .vinyl:hover { transform: rotate(.6deg); } }
.hero:has(.hero-links a:focus-visible) .vinyl { transform: rotate(.6deg); }
.section-shell { padding-inline: max(24px, calc(56 * var(--u))); }
.about-details { display: grid; grid-template-columns: 1fr 2fr; column-gap: 56px; align-items: start; padding-block: 64px 72px; }
.extended-description { max-width: 56ch; font-size: 24px; line-height: 1.6; padding-top: 8px; }
.extended-description p + p { margin-top: 16px; }
.current-work { display: grid; grid-template-columns: 1fr 1.6fr; column-gap: 64px; align-items: center; padding-block: 48px 56px; background: var(--ink) url('assets/plates/trades-ground.png') repeat; background-size: 340px 270px; color: var(--paper); }
.current-work h2 { max-width: 10ch; text-wrap: balance; }
.current-project { font-family: 'League Gothic', sans-serif; font-size: 72px; line-height: 1.1; text-wrap: balance; }
.gigs { padding-top: calc(24 * var(--u)); padding-bottom: 100px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-bottom: 32px; }
.section-shell h2 { font-family: 'League Gothic', sans-serif; font-weight: 400; font-size: 96px; line-height: 1.06; -webkit-text-stroke: 1px currentColor; }
button { color: inherit; font: inherit; cursor: pointer; }
.gig-filters { display: flex; align-items: center; gap: 28px; }
.gig-filters button { background: none; border: 0; border-bottom: 1px solid transparent; padding: 12px 0; font-size: 16px; }
.gig-filters button[aria-pressed="true"] { color: var(--red); border-bottom-color: currentColor; }
.gig-filters button:hover { border-bottom-color: currentColor; }
.gig-filters span { margin-left: 4px; font-size: 13px; }
.gig-row { display: grid; grid-template-columns: 1fr 3fr 2fr; align-items: center; gap: 32px; min-height: 210px; padding-block: 32px; border-block: 1px solid #8f8d83; }
.gig-row h3 { margin: 0 0 10px; font-family: 'League Gothic', sans-serif; font-weight: 400; font-size: 56px; line-height: 1.1; }
.gig-row p { font-size: 16px; line-height: 1.6; }
.gig-state { align-self: start; padding-top: 8px; }
.gig-row .text-link, .played-label { justify-self: end; font-size: 16px; }
.played-label { border: 1px solid #8f8d83; padding: 6px 16px; }
.gig-panel + .gig-panel { margin-top: 28px; }
.gig-panel[hidden], [hidden] { display: none !important; }
.gallery { display: grid; grid-template-columns: 1fr 2fr; column-gap: 56px; padding-block: 40px 112px; }
.gallery-intro p { font-size: 16px; line-height: 1.6; margin-top: 20px; max-width: 27ch; }
.gallery-empty { min-height: 248px; padding: 36px 0; border-block: 1px solid #8f8d83; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.coming-soon { font-size: 28px; line-height: 1.3; }
.gallery-empty > p:not(.coming-soon) { font-size: 16px; line-height: 1.6; }
.gallery-empty .text-link { margin-top: 16px; font-size: 16px; }
.photo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.photo { margin: 0; }
.photo a { display: block; overflow: hidden; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.photo figcaption { font-size: 14px; line-height: 1.5; margin-top: 10px; }
.contact { background: var(--ink) url('assets/plates/trades-ground.png') repeat; background-size: 340px 270px; color: var(--paper); padding-top: 72px; }
.contact-details { margin-top: 28px; }
.contact-details > p { line-height: 1.6; font-size: 18px; margin-bottom: 20px; }
.email-link { display: inline-flex; align-items: center; gap: 28px; font-size: clamp(24px,3.3vw,48px); letter-spacing: -.025em; line-height: 1.4; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 10px; }
.email-link svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.copy-row { display: flex; align-items: center; gap: 16px; min-height: 52px; margin-top: 12px; }
#copy-email { background: transparent; padding: 8px 0; border: 0; text-decoration: underline; text-underline-offset: .3em; font-size: 14px; }
#copy-email:disabled { cursor: wait; }
#copy-status { font-size: 14px; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 80px; padding-block: 24px; border-top: 1px solid #74736c; font-size: 13px; }
.footer-wordmark { font-family: 'League Gothic', sans-serif; font-size: 38px; letter-spacing: -.01em; text-decoration: none; }
footer > a:last-child { display: flex; gap: 12px; align-items: center; }
footer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.contact :focus-visible { outline-color: var(--paper); }
@media (max-width: 1100px) {
  .opening { height: auto; padding-inline: 24px; }
  .site-header { position: relative; left: auto; right: auto; height: 72px; padding: 0; }
  .wordmark { font-size: 32px; -webkit-text-stroke: .5px currentColor; }
  .site-header nav { font-size: 14px; gap: 26px; }
  .hero { display: grid; position: relative; grid-template-columns: 45% 55%; padding-block: 32px 40px; row-gap: 16px; min-height: 520px; }
  h1 { position: relative; top: auto; left: auto; grid-column: 1; font-size: 22vw; line-height: .95; -webkit-text-stroke: 3px currentColor; }
  .genres { position: relative; top: auto; left: auto; grid-column: 1; font-size: 9vw; line-height: .84; -webkit-text-stroke: 1.4px currentColor; }
  .intro { position: relative; top: auto; left: auto; grid-column: 1; width: 100%; margin-top: 16px; font-size: 18px; line-height: 1.5; }
  .hero-links { position: relative; top: auto; left: auto; grid-column: 1; flex-wrap: wrap; gap: 18px 28px; font-size: 18px; margin-top: 8px; }
  .hero .vinyl { left: 45%; top: auto; bottom: 0; width: calc(60vw); height: auto; aspect-ratio: 849 / 730; }
  .about-details { column-gap: 32px; padding-block: 48px 56px; }
  .extended-description { font-size: 20px; }
  .current-work { grid-template-columns: 1fr 1.4fr; column-gap: 40px; padding-block: 40px 48px; }
  .current-project { font-size: 60px; }
  .gigs { padding-top: 36px; padding-bottom: 64px; }
  .section-shell h2 { font-size: 80px; }
  .gig-row { grid-template-columns: .65fr 1.5fr 1fr; gap: 24px; }
  .gig-row h3 { font-size: 48px; }
  .gig-row .text-link { font-size: 14px; gap: 8px; }
  .gallery { column-gap: 32px; padding-block: 32px 72px; }
  .coming-soon { font-size: 24px; }
  .contact { padding-top: 56px; }
  footer { flex-wrap: wrap; gap: 24px; margin-top: 60px; }
}
@media (max-width: 600px) {
  .site-header { height: 68px; gap: 20px; }
  .site-header nav { gap: 18px; font-size: 12px; }
  .site-header nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .site-header nav a:first-child { display: none; }
  .wordmark { font-size: 28px; }
  .hero { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 0 0; gap: 24px; min-height: 0; }
  h1 { font-size: 35vw; line-height: .9; -webkit-text-stroke: 2.5px currentColor; transform: scaleX(.884); margin-bottom: 4px; }
  .genres { font-size: 19vw; line-height: .83; -webkit-text-stroke: 1.6px currentColor; }
  .intro { margin-top: 0; font-size: 16px; line-height: 1.5; max-width: 36ch; }
  .hero-links { margin: 0; gap: 28px; font-size: 16px; }
  .text-link { gap: 12px; }
  .text-link svg { width: 20px; height: 20px; }
  .hero .vinyl { position: relative; left: auto; top: auto; align-self: flex-end; width: calc(100% + 24px); max-width: none; height: auto; margin: 0 -24px 0 0; aspect-ratio: 849 / 730; }
  .about-details { grid-template-columns: 1fr; row-gap: 20px; padding-block: 40px 48px; }
  .extended-description { padding: 0; font-size: 18px; line-height: 1.6; }
  .current-work { grid-template-columns: 1fr; row-gap: 28px; padding-block: 36px 44px; }
  .current-project { font-size: 48px; }
  .section-shell h2 { font-size: 68px; }
  .section-head { margin-bottom: 24px; gap: 16px; align-items: flex-end; }
  .gig-filters { gap: 18px; }
  .gig-filters button { font-size: 14px; padding-bottom: 10px; min-height: 44px; }
  .gig-filters span { font-size: 11px; margin-left: 1px; }
  .gig-row { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding-block: 28px; }
  .gig-state { padding: 0; font-size: 13px !important; }
  .gig-row h3 { font-size: 44px; }
  .gig-row .text-link, .played-label { justify-self: start; font-size: 14px; }
  .gallery { display: block; padding-block: 0 64px; }
  .gallery-intro { margin-bottom: 24px; }
  .gallery-intro p { margin-top: 14px; max-width: none; }
  .gallery-empty { min-height: 0; padding-block: 28px 32px; }
  .coming-soon { font-size: 23px; }
  .gallery-empty .text-link { margin-top: 12px; }
  .photo-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact { padding-top: 40px; }
  .contact-details { margin-top: 20px; }
  .contact-details > p { font-size: 16px; max-width: 28ch; }
  .email-link { font-size: clamp(20px,5.8vw,32px); gap: 12px; letter-spacing: -.02em; }
  .email-link svg { width: 24px; height: 24px; flex-shrink: 0; }
  .copy-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  footer { display: grid; grid-template-columns: 1fr 1fr; margin-top: 44px; gap: 20px 16px; padding-block: 24px 28px; }
  footer > span { grid-column: 1 / -1; grid-row: 2; font-size: 11px; }
  footer > a:nth-last-child(2) { justify-self: end; }
  footer > a:last-child { grid-column: 1 / -1; font-size: 12px; min-height: 32px; }
}
@media (max-width: 360px) {
  .site-header nav { gap: 12px; }
  .hero-links { gap: 20px; }
  .gig-filters { gap: 12px; }
  .gig-filters button { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vinyl { animation: none; transition: none; }
  .vinyl:hover, .hero:has(.hero-links a:focus-visible) .vinyl { transform: none; }
}