/* chuckdiesel.co - rebuild stylesheet
 *
 * Every value here was read out of the live theme's compiled CSS (site__5bf21308.css in
 * the staging mirror) rather than eyeballed, so the rebuild lands on the same design:
 *
 *   #siteWrapper  Source Code Pro 14px / 1.75 / +0.4px, #fff on #100806
 *   h1            Abel 96px uppercase +7px, line-height 1
 *   h2            Abel 54px uppercase +4px, line-height 1.1
 *   h3            Abel 32px uppercase +2px, line-height 1.2
 *   nav           Source Code Pro 12px uppercase +2px, rgba(255,255,255,.6)
 *   footer nav    same, +3px
 *   logo          140px wide, centred inside the nav row; header 140px tall
 *   index overlay rgba(16,8,6,.4) over the section background
 *   buttons       Source Code Pro uppercase; medium = 15px/+3px, 21px 34px padding.
 *                 Over a section image they render as a 2px white outline, filling on hover.
 *
 * Everything Squarespace shipped to support the editor, commerce and its block system is
 * gone; this file is the whole design system.
 */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: "Abel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/abel-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Code Pro ships from Google Fonts as one variable file per subset, so a single
   face covers 200-900 rather than four separate weight files. */
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-code-pro-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-code-pro-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-code-pro-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens */

:root {
  --bg: #100806;
  --fg: #ffffff;
  --fg-soft: rgba(255, 255, 255, 0.9);
  --fg-dim: rgba(255, 255, 255, 0.6);
  --fg-faint: rgba(255, 255, 255, 0.35);
  --rule: rgba(255, 255, 255, 0.15);
  --overlay: rgba(16, 8, 6, 0.4);
  --ink: #111111;

  --font-body: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Abel", "Helvetica Neue", Arial, sans-serif;

  /* The live index sections lay their content out in a 1012px column inside a 1080px
     page, and the body copy sits in the middle 8 of 12 grid columns (~697px). */
  --wrap: 1012px;
  --wrap-wide: 1360px;
  --gutter: 30px;
  --measure: 700px;

  --header-h: 140px;
}

/* ---------------------------------------------------------------- reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* index-section anchors sit under the fixed-ish header without this */
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.4px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
video {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--fg);
  color: var(--ink);
  padding: 10px 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.skip-link:focus {
  left: 0;
}

/* Safari 12 has no :focus-visible. A plain :focus ring first, then narrowed to
   keyboard focus where the browser understands it. Separate rules on purpose: one
   unknown selector in a list invalidates the entire rule. */
:focus {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- typography */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 0 0.5em;
}

h1 {
  font-size: 96px;
  font-size:clamp(38px, 7vw, 96px);
  line-height: 1;
  letter-spacing: 7px;
}

h2 {
  font-size: 54px;
  font-size:clamp(28px, 6vw, 54px);
  line-height: 1.1;
  letter-spacing: 4px;
}

h3 {
  font-size: 32px;
  font-size:clamp(22px, 4vw, 32px);
  line-height: 1.2;
  letter-spacing: 2px;
}

h4 {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 2px;
}

p {
  margin: 0 0 1.4em;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte a {
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

.rte a:hover {
  border-bottom-color: var(--fg);
}

.rte img {
  height: auto;
}

.rte ul,
.rte ol {
  padding-left: 1.4em;
  margin: 0 0 1.4em;
}

.rte blockquote {
  margin: 0 0 1.4em;
  padding-left: 1.2em;
  border-left: 2px solid var(--rule);
  color: var(--fg-soft);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap--wide {
  max-width: var(--wrap-wide);
}

.page-body {
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: 96px;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: relative;
  z-index: 1002;
  padding: 0 var(--gutter);
  background: var(--bg);
}

/* Index pages open on a full-bleed image; the header floats over it, as on the live site. */
.site-header--over-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-h);
  flex-wrap: wrap;
}

.logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  margin: 0 26px;
}

.logo img {
  width: 140px;
  max-width: 140px;
  height: auto;
  object-fit: contain;
}

/* The anchor and <picture> are flex items and would otherwise stretch, leaving the
   140px image floating at the left of a 260px box on narrow screens. */
.logo,
.logo picture {
  width: 140px;
  flex: 0 0 auto;
}

.logo picture {
  display: block;
}

/* One centred row: index anchors, logo, page links. */
.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.main-nav__side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.main-nav__side--left {
  justify-content: flex-end;
}

.main-nav__side--right {
  justify-content: flex-start;
}

.main-nav a {
  display: block;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-dim);
  transition: color 0.1s ease-in-out;
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav a[aria-current="page"] {
  color: var(--fg);
}

/* -- mobile nav: a checkbox toggle, so it works with JavaScript off -- */

.mobile-nav-button {
  display: none;
  width: 40px;
  height: 36px;
  padding: 9px 8px;
  cursor: pointer;
  flex: 0 0 auto;
}

.mobile-nav-button .bar {
  display: block;
  height: 2px;
  background: var(--fg);
  margin-bottom: 5px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.mobile-nav-button .bar:last-child {
  margin-bottom: 0;
}

@media (max-width: 899px) {
  /* Mobile header: logo centred, menu button ranged right, as on the live site. */
  .mobile-nav-button {
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .header-inner {
    position: relative;
    min-height: 92px;
  }

  .main-nav {
    flex-direction: column;
    align-items: center;
  }

  .main-nav {
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 18px;
  }

  /* The logo has a fixed 140px width, so stretch leaves it at the left edge. */
  .logo {
    align-self: center;
    order: -1;
    margin: 0 auto;
  }

  .main-nav__side {
    display: none;
    flex-direction: column;
    align-items: stretch;
  }

  .mobile-nav-toggle:checked ~ .main-nav .main-nav__side {
    display: flex;
  }

  .main-nav a {
    padding: 0.8em 0;
    text-align: center;
    border-top: 1px solid var(--rule);
  }

  .mobile-nav-toggle:checked ~ .mobile-nav-button .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-nav-toggle:checked ~ .mobile-nav-button .bar:nth-child(2) {
    opacity: 0;
  }

  .mobile-nav-toggle:checked ~ .mobile-nav-button .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-header--over-media {
    background: linear-gradient(to bottom, rgba(16, 8, 6, 0.85), rgba(16, 8, 6, 0));
  }

  /* The open menu used to draw straight over the hero: on an index page the header is
     position:absolute and transparent, so the links, the "LISTEN TO CHUCKDIESEL" button and
     the social icons all rendered on top of each other and none of them were readable.
     (The rule that used to live here tried to fix it with `~ .main-nav ~ *`, but .main-nav
     is the LAST child of .header-inner, so it selected nothing and never had any effect.)

     Give the open panel its own opaque background instead, bled out past the header's
     gutter so it reaches both screen edges. */
  .mobile-nav-toggle:checked ~ .main-nav {
    background: var(--bg);
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    /* Breathing room so the first link clears the logo instead of sitting under it. */
    padding-top: 10px;
  }

  /* The button is centred in .header-inner, which is fine while the header is one 92px
     row - but the row grows to the full height of the menu when it opens, which walked the
     close button down into the middle of the list. Pin it to the centre of the first row. */
  .mobile-nav-toggle:checked ~ .mobile-nav-button {
    top: 46px;
  }
}

/* ---------------------------------------------------------------- index sections */

.index-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px 0;
  overflow: hidden;
}

.index-section:not(.has-media) {
  background: var(--bg);
  min-height: 0;
  padding: 96px 0;
}

.index-section__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.index-section__media picture,
.index-section__media img,
picture.fill,
picture.fill img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.index-section__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--overlay);
}

.index-section__content {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}

.index-section__content > .wrap {
  max-width: var(--wrap);
}

.rte p,
.rte li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-soft);
}

/* Squarespace's 12-column grid, only ever used as 9/3 and 8 here.
   The columns carry no gap of their own - a 60px gap on all twelve tracks would eat
   660px of a 1012px row and crush the 8-column body copy to a couple of words wide.
   Spacing between adjacent columns is applied to the columns instead. */
.grid-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 0;
  row-gap: 32px;
  justify-content: center;
}

.grid-col + .grid-col {
  padding-left: 48px;
}

.grid-col {
  grid-column: span 12;
  min-width: 0;
}

.grid-col--3 { grid-column: span 3; }
.grid-col--4 { grid-column: span 4; }
.grid-col--6 { grid-column: span 6; }
/* Written as start / span, not `span 8` plus a separate grid-column-start: the shorthand
   sets grid-column-end to auto, so overriding only the start leaves the column one track
   wide. This one bug crushed the About copy to a two-letter column. */
.grid-col--8 { grid-column: 3 / span 8; text-align: left; }
.grid-col--9 { grid-column: span 9; text-align: left; }

@media (max-width: 899px) {
  .grid-col,
  .grid-col--3,
  .grid-col--4,
  .grid-col--6,
  .grid-col--8,
  .grid-col--9 {
    grid-column: 1 / -1;
  }

  .grid-col + .grid-col {
    padding-left: 0;
  }
}

.index-section--gallery .index-section__content,
.index-section--album .index-section__content {
  text-align: left;
}

/* ---------------------------------------------------------------- buttons */

.btn-wrap {
  margin: 1.8em 0;
}

.btn-wrap--center {
  text-align: center;
}

.btn-wrap--left {
  text-align: left;
}

.btn-wrap--right {
  text-align: right;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.1s linear, color 0.1s linear;
}

.btn--small {
  padding: 13px 26px;
  font-size: 12px;
  letter-spacing: 2px;
}

.btn--medium {
  padding: 21px 34px;
  font-size: 15px;
  letter-spacing: 3px;
}

.btn--large {
  padding: 22px 44px;
  font-size: 17px;
  letter-spacing: 2px;
}

.btn--primary {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--ink);
}

.btn--primary:hover {
  background: #e6e6e6;
  border-color: #e6e6e6;
}

/* Over a section background image the live theme draws every button as a white outline
   that fills on hover, regardless of the button's configured variant. */
.index-section.has-media .btn,
.cover-page .btn {
  background: transparent;
  border-color: var(--fg);
  color: var(--fg);
}

.index-section.has-media .btn:hover,
.cover-page .btn:hover {
  background: var(--fg);
  color: var(--ink);
}

.btn--secondary,
.btn--tertiary {
  background: transparent;
  border-color: var(--fg);
  color: var(--fg);
}

.btn--secondary:hover,
.btn--tertiary:hover {
  background: var(--fg);
  color: var(--ink);
}

/* ---------------------------------------------------------------- social icons */

.social-links {
  display: flex;
  flex-wrap: wrap;
  /* Spacing on this row is margin, not `gap`. Safari 12 - the review machine - supports
     `gap` in grid but not in flexbox, and no @supports test can separate those two: the
     query asks whether the browser knows the property, and Safari 12 says yes because
     grid uses it. A guarded fallback would therefore switch itself off on the one browser
     it exists for, so the margin is applied unconditionally instead. `gap` is still used
     freely on grid containers, which Safari 12 handles correctly. */
  margin: 1.6em 0;
}

/* The between-items margin that replaces `gap`. Every one of the 55 instances in the
   built site holds exactly five icons: 176px at the default 24px, 216px at the --large
   32px, so this row does not wrap even at a 320px viewport. That is what makes the
   adjacent-sibling margin an exact stand-in - it adds no row spacing, so it would be
   wrong the moment this row wrapped. Re-check if a sixth icon is ever added. */
.social-links > * + * {
  margin-left: 14px;
}

.social-links--center {
  justify-content: center;
}

.social-links a {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--fg);
}

.social-links--large a {
  width: 32px;
  height: 32px;
}

.social-links svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
  transition: opacity 0.12s ease;
}

.social-links:hover a {
  opacity: 0.5;
}

.social-links a:hover {
  opacity: 1;
}

/* ---------------------------------------------------------------- gallery + lightbox */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin: 2em 0;
}

.gallery__item {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.gallery__item picture,
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease, opacity 0.2s ease;
}

.gallery__item:hover img {
  transform: scale(1.04);
  opacity: 0.85;
}

.lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
  background: rgba(16, 8, 6, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px;
}

.lightbox[hidden] {
  display: none !important;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--fg-dim);
  padding: 0 60px;
}

.lightbox__btn {
  position: absolute;
  background: none;
  border: 0;
  color: var(--fg);
  font-size: 28px;
  line-height: 1;
  padding: 12px 16px;
  cursor: pointer;
  opacity: 0.7;
}

.lightbox__btn:hover {
  opacity: 1;
}

.lightbox__close {
  top: 8px;
  right: 10px;
  font-size: 32px;
}

.lightbox__prev {
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__next {
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------------------------------------------------------------- audio album */

/* Cover art left, track list right - the live layout. */
.album {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin: 0 auto;
  max-width: 900px;
  text-align: left;
}

.album__side {
  min-width: 0;
}

.album__cover {
  position: relative;
  aspect-ratio: 1;
  margin-bottom: 20px;
}

.album__cover picture,
.album__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.album__play {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* A play triangle inside a ring, drawn in CSS so there is no icon request. */
.album__play-icon {
  width: 62px;
  height: 62px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  display: block;
  position: relative;
  background: rgba(16, 8, 6, 0.25);
  transition: background 0.15s ease, transform 0.15s ease;
}

.album__play-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.95);
}

.album__play:hover .album__play-icon {
  background: rgba(16, 8, 6, 0.55);
  transform: scale(1.06);
}

/* Playing: the triangle becomes a pause bar pair. */
.album.is-playing .album__play-icon::before {
  border: 0;
  width: 16px;
  height: 20px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.95) 0 6px,
    transparent 6px 10px,
    rgba(255, 255, 255, 0.95) 10px 16px
  );
}

.album__title {
  margin-bottom: 0.15em;
  font-size: 34px;
  font-size:clamp(24px, 3vw, 34px);
}

.album__artist {
  margin: 0;
  font-size: 14px;
  color: var(--fg-dim);
}

.tracks {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.track {
  position: relative;
  border-bottom: 1px solid var(--rule);
}

.track:first-child {
  border-top: 1px solid var(--rule);
}

.track__btn {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: 0;
  padding: 14px 4px;
  text-align: left;
  cursor: pointer;
  color: var(--fg-soft);
  transition: color 0.12s ease;
}

.track__btn:hover,
.track.is-current .track__btn {
  color: var(--fg);
}

/* margin rather than gap; see .social-links. This row never wraps, so the
   adjacent-sibling margin is an exact stand-in. */
.track__btn > * + * {
  margin-left: 16px;
}

.track__info {
  flex: 1 1 auto;
  min-width: 0;
}

.track__title {
  display: block;
  font-size: 15px;
  line-height: 1.3;
}

.track__artist {
  display: block;
  font-size: 12px;
  color: var(--fg-faint);
}

.track.is-playing .track__title::before {
  content: "B6";
  font-size: 9px;
  margin-right: 8px;
  vertical-align: 2px;
}

.track__time {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.track__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
}

.track__played {
  height: 100%;
  width: 0;
  background: var(--fg);
}

/* With JavaScript the button drives playback and the raw link is redundant. Without it,
   .track__fallback is the only way to reach the mp3, so it stays visible. */
.track__fallback {
  display: block;
  padding: 0 4px 12px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.js .track__fallback {
  display: none;
}

@media (max-width: 767px) {
  .album {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .album__cover {
    max-width: 320px;
  }
}

/* ---------------------------------------------------------------- forms */

.nl-form,
.booking-form {
  max-width: 620px;
  margin: 2em auto;
  text-align: left;
}

.nl-head {
  text-align: center;
}

.nl-head p {
  color: var(--fg-soft);
  font-size: 14px;
}

.nl-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* margin rather than gap; see .social-links */
  margin: -5px;
}

.nl-row > * {
  margin: 5px;
}

.nl-input {
  flex: 1 1 240px;
}

.field {
  margin-bottom: 20px;
}

.field--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

label {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--rule);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  border-radius: 0;
  appearance: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--fg);
  outline: none;
}

::placeholder {
  color: var(--fg-faint);
}

select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.6) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.field-help,
.form-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--fg-faint);
  letter-spacing: 0;
}

.form-note a {
  color: var(--fg-dim);
}

.form-title {
  text-align: center;
}

/* Honeypot. Off-screen rather than display:none - a field the browser never renders is
   one a bot can learn to skip. Nothing here is meant to be seen, tabbed to or read out. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile renders into an iframe of its own; this is only the space around it. */
.cf-turnstile {
  margin: 0 0 20px;
}

.nl-form .cf-turnstile {
  margin: 16px auto 0;
  display: flex;
  justify-content: center;
}

.form-status {
  margin: 10px 0 0;
  font-size: 13px;
  letter-spacing: 0;
  min-height: 1.4em;
}

.form-status--pending {
  color: var(--fg-dim);
}

.form-status--ok {
  color: var(--fg);
}

.form-status--error {
  color: #ff8a7a;
}

/* ---------------------------------------------------------------- instagram grid */

.ig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  margin: 2em 0;
}

.ig-item {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}

.ig-item picture,
.ig-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s ease;
}

.ig-item:hover img {
  opacity: 0.8;
}

/* ---------------------------------------------------------------- blog */

.post-summary {
  list-style: none;
  margin: 1.5em auto;
  padding: 0;
  max-width: 620px;
  text-align: left;
}

.post-summary li {
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}

.post-summary a {
  text-decoration: none;
  display: block;
}

.post-summary time,
.entry__meta {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.blog-list .entry {
  padding: 0 0 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--rule);
}

.blog-list .entry:last-child {
  border-bottom: 0;
}

.entry__meta {
  margin: 0 0 10px;
}

.entry__author {
  margin-left: 12px;
}

.entry__title {
  font-size: 36px;
  font-size:clamp(24px, 4vw, 36px);
  letter-spacing: 2px;
  line-height: 1.15;
}

.entry__title a {
  text-decoration: none;
}

.entry__title a:hover {
  color: var(--fg-dim);
}

.post__title {
  letter-spacing: 4px;
  font-size: 46px;
  font-size:clamp(28px, 5vw, 46px);
}

.post__body,
.entry__body {
  color: var(--fg-soft);
  font-size: 15px;
}

.post-image {
  margin: 2em 0;
}

.post-image img {
  display: block;
  width: 100%;
}

.post__archive-note,
.archive-list__note {
  font-size: 12px;
  color: var(--fg-faint);
  border-left: 2px solid var(--rule);
  padding-left: 14px;
}

.post__back {
  margin-top: 48px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.archive-list {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}

.archive-list ul {
  list-style: none;
  margin: 1.5em 0 0;
  padding: 0;
}

.archive-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.archive-list a {
  text-decoration: none;
}

.archive-list a:hover {
  color: var(--fg-dim);
}

.archive-list time {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---------------------------------------------------------------- merch */

.product-grid {
  list-style: none;
  margin: 2em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
}

.product-card a {
  display: block;
  text-decoration: none;
}

.product-card picture,
.product-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.04);
}

.product-card__title {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.product-card__price {
  display: block;
  font-size: 12px;
  color: var(--fg-dim);
}

.product-back,
.product-note {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.product-back a {
  text-decoration: none;
}

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 24px;
}

.product-media {
  display: grid;
  gap: 12px;
}

.product-media img {
  display: block;
  width: 100%;
}

.product-title {
  letter-spacing: 3px;
  font-size: 40px;
  font-size:clamp(26px, 4vw, 40px);
}

.product-price {
  font-size: 18px;
  color: var(--fg);
  margin-bottom: 1.4em;
}

.product-excerpt {
  color: var(--fg-soft);
}

.product-options {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--fg-dim);
}

.product-note {
  margin-top: 2em;
  border-top: 1px solid var(--rule);
  padding-top: 1.4em;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 767px) {
  .product-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .field--split {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- image blocks */

.image-block {
  margin: 2em 0;
}

.image-block img {
  display: block;
  width: 100%;
}

.image-block figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--fg-faint);
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--bg);
  padding: 64px var(--gutter) 72px;
  border-top: 1px solid var(--rule);
}

.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  text-align: center;
}

.back-to-top a,
.site-email a {
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.back-to-top a:hover,
.site-email a:hover {
  color: var(--fg);
}

.site-email {
  margin: 1.4em 0;
}

/* ---------------------------------------------------------------- cover page */

.cover-page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  overflow: hidden;
}

.cover-page__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.cover-page__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(16, 8, 6, 0.55);
}

.cover-page__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  text-align: center;
}

.cover-page__heading {
  font-size: 52px;
  font-size:clamp(28px, 6vw, 52px);
  letter-spacing: 5px;
  margin-bottom: 0.35em;
}

.cover-page__body {
  color: var(--fg-soft);
  margin-bottom: 1.8em;
}

.cover-page__home a {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fg-faint);
  text-decoration: none;
}

/* ---------------------------------------------------------------- staging */

.staging-banner {
  position: fixed;
  z-index: 9999;
  left: 0;
  right: 0;
  bottom: 0;
  background: #b3261e;
  color: #fff;
  font: 600 12px/1.5 var(--font-body);
  letter-spacing: 1px;
  padding: 6px 10px;
  text-align: center;
}

body.is-staging {
  padding-bottom: 30px;
}


/* ---------------------------------------------------------------- summary grid */

/* The Squarespace summary block: a responsive grid of blog cards, date + title +
   excerpt + read-more. --per-row comes from the block's own configuration. */
/* Squarespace's autogrid: as many ~270px columns as the container fits, capped at the
   block's slides-per-row. Forcing exactly --per-row columns would give four 145px
   columns inside the 9-of-12 news column, where the live site fits three. */
.summary-grid {
  list-style: none;
  margin: 1.5em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 40px 36px;
  text-align: left;
}

.summary-card__date {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 8px;
}

.summary-card__title {
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 1.2;
  margin-bottom: 0.6em;
}

.summary-card__title a {
  text-decoration: none;
}

.summary-card__title a:hover {
  color: var(--fg-dim);
}

.summary-card__excerpt p {
  font-size: 14px;
  line-height: 1.7;
}

.summary-card__more {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--fg-dim);
  text-decoration: none;
}

.summary-card__more:hover {
  color: var(--fg);
}

/* ---------------------------------------------------------------- newsletter extras */

.nl-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--fg-faint);
  text-align: center;
}

.nl-desc {
  font-size: 14px;
}

/* ---------------------------------------------------------------- sticky nav */

/* The live theme slides a compact nav bar in once the hero has scrolled past. Driven by
   an IntersectionObserver in site.js; without JavaScript the header simply scrolls away,
   which is the graceful outcome. */
.scroll-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: var(--bg);
  padding: 5px var(--gutter);
  transform: translateY(-100%);
  transition: transform 0.14s ease-in-out;
}

.scroll-nav.is-visible {
  transform: none;
}

.scroll-nav .main-nav {
  min-height: 0;
}

.scroll-nav .logo {
  display: none;
}

@media (max-width: 899px) {
  .scroll-nav {
    display: none;
  }
}


/* ---------------------------------------------------------------- legacy fallbacks */

/* `aspect-ratio` is Safari 15. Without it these boxes have no height, and the images
   inside them are sized `height: 100%` of that zero - so they vanish. The padding-top
   ratio hack holds the box open and the image is positioned into it; @supports hands
   both back where aspect-ratio works.

   Product-card images are not in this list: their sources are already square, so letting
   them size naturally on an old browser is correct rather than merely tolerable. */
.gallery__item,
.album__cover,
.ig-item {
  height: 0;
  padding-top: 100%;
}

.gallery__item {
  padding-top: 66.6667%;
}

.gallery__item > picture,
.gallery__item > img,
.album__cover > picture,
.album__cover > img,
.ig-item > picture,
.ig-item > img {
  position: absolute;
  top: 0;
  left: 0;
}

@supports (aspect-ratio: 1) {
  .gallery__item,
  .album__cover,
  .ig-item {
    height: auto;
    padding-top: 0;
  }

  .gallery__item > picture,
  .gallery__item > img,
  .album__cover > picture,
  .album__cover > img,
  .ig-item > picture,
  .ig-item > img {
    position: static;
  }
}

/* The ratio hack needs a positioning context on the box itself. */
.gallery__item,
.ig-item {
  position: relative;
}

/* legacy-fallbacks: applied */

/* ---------------------------------------------------------------- events

   Tour dates, added through the CMS. The list is absent entirely until there is a first
   event, so this styles a component the page does not currently render. Kept in the same
   register as .summary-card: uppercase tracked date, larger title, rules between rows. */

.event-list {
  list-style: none;
  margin: 1.5em auto 0;
  padding: 0;
  max-width: 640px;
  text-align: left;
}

.event {
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}

.event:last-child {
  border-bottom: 1px solid var(--rule);
}

.event__date {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 8px;
}

.event__title {
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 1.2;
  margin: 0 0 6px;
}

.event__where {
  font-size: 14px;
  color: var(--fg-dim);
  margin: 0;
}

.event__details {
  margin-top: 10px;
}

.event__tickets {
  margin: 14px 0 0;
}