/* Strings Theory - vintage gig poster meets zine */
:root {
  --paper: #f0e5c9;
  --paper-2: #e7d9b6;
  --ink: #221d14;
  --rust: #b3502d;
  --teal: #2e6b64;
  --gold: #c8992e;
  --shadow: 5px 5px 0 var(--ink);
}

[data-theme="dark"] {
  --paper: #211b12;
  --paper-2: #2b2318;
  --ink: #ede2c8;
  --rust: #d0693f;
  --teal: #4aa094;
  --gold: #d3a94e;
}

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

body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  min-height: 100vh;
}

/* paper grain */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.11 0 0 0 0 0.08 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, .wordmark { font-family: 'Fraunces', Georgia, serif; }

/* lights toggle */
.lights {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 60;
  width: 2.7rem;
  height: 2.7rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lights:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.lights:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

a { color: var(--ink); }

/* ---------- masthead ---------- */
.masthead {
  text-align: center;
  padding: 3.2rem 1rem 0;
  border-bottom: 3px solid var(--ink);
  max-width: 960px;
  margin: 0 auto;
}

.wordmark {
  display: inline-block;
  text-decoration: none;
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.wm-strings {
  display: inline-block;
  color: var(--rust);
  transform: rotate(-2deg);
  text-shadow: 3px 3px 0 var(--ink);
  -webkit-text-stroke: 1.5px var(--ink);
  padding-right: 0.18em;
}
.wm-theory {
  display: inline-block;
  color: var(--teal);
  transform: rotate(1.2deg) translateY(0.06em);
  text-shadow: 3px 3px 0 var(--ink);
  -webkit-text-stroke: 1.5px var(--ink);
  font-style: italic;
}

.tagline {
  margin-top: 1.7rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--ink);
  opacity: 0.75;
}
.tagline::before, .tagline::after { content: " \2726 "; color: var(--gold); opacity: 1; }

.masthead nav {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-bottom: 1.3rem;
}
.masthead nav a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.6rem 1.35rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.masthead nav a:hover {
  background: var(--paper-2);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}
.masthead nav a:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}
.masthead nav a.on {
  background: var(--rust);
  color: var(--paper);
}

/* ---------- main ---------- */
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.6rem 1.2rem 4rem;
}

.kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: var(--rust);
  margin-bottom: 0.5rem;
}

.byline { font-size: 0.85rem; opacity: 0.7; margin-top: 0.7rem; }
.deck { margin-top: 0.55rem; font-size: 0.98rem; }

/* lead post */
.lead-card {
  display: block;
  text-decoration: none;
  border: 3px solid var(--ink);
  background: var(--paper-2);
  box-shadow: var(--shadow);
  padding: 2.2rem 2.4rem 2rem;
  margin-bottom: 2.6rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lead-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.lead-card h2 {
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
}

/* card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.6rem;
}
.card {
  display: block;
  text-decoration: none;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 1.5rem 1.6rem 1.3rem;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: rotate(0deg) translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.card h3 { font-size: 1.32rem; font-weight: 700; line-height: 1.2; }
.card .deck { font-size: 0.92rem; }

/* ---------- single post ---------- */
.post { max-width: 680px; margin: 0 auto; }
.post h1 {
  font-size: clamp(2rem, 6vw, 3.1rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.prose { margin-top: 1.8rem; }
.prose p { margin-bottom: 1.15rem; }
.prose h2, .prose h3 {
  margin: 2rem 0 0.8rem;
  font-weight: 700;
}
.prose h2 { font-size: 1.55rem; }
.prose h3 { font-size: 1.25rem; }
.prose a { color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose blockquote {
  border-left: 4px solid var(--gold);
  padding: 0.4rem 0 0.4rem 1.2rem;
  margin: 1.4rem 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
}
.prose ul { padding-left: 1.4rem; margin-bottom: 1.15rem; }
.prose li { margin-bottom: 0.35rem; }
.prose hr {
  border: none;
  text-align: center;
  margin: 2.2rem 0;
}
.prose hr::after { content: "\2726 \2726 \2726"; color: var(--gold); letter-spacing: 1em; padding-left: 1em; }
.prose img { max-width: 100%; border: 2px solid var(--ink); box-shadow: var(--shadow); }
.prose code {
  background: var(--paper-2);
  border: 1px solid var(--ink);
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

.backlink { margin-top: 2.6rem; }
.backlink a {
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  border-bottom: 2px solid var(--rust);
}
.backlink a::before { content: "\2190  "; }

/* ---------- pages ---------- */
.page-title {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  margin-bottom: 0.6rem;
}
.page-intro { max-width: 560px; margin-bottom: 2.2rem; }
.page-prose { max-width: 620px; }
.centered { text-align: center; margin-left: auto; margin-right: auto; }
.empty { opacity: 0.7; font-style: italic; }

/* Gallery header. Deliberately quiet and centred: the masthead above it is
   centred and the photos below run edge to edge, so a big left indented title
   sat awkwardly between the two. Scoped to the gallery so the other pages keep
   their normal left aligned .page-title. */
.gallery-head {
  text-align: center;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}
.gallery-head h1 {
  font-size: clamp(1.55rem, 3.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin: 0 0 0.5rem;
}
.gallery-head p {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.68;
  margin: 0;
  text-wrap: balance;   /* keeps the two lines even instead of one long, one short */
}

/* gallery
   Edge to edge photo wall. The grid breaks out of main's 960px column and runs
   the full viewport width with no outer margin, so the screen is all photos.
   Masonry via CSS multi-column keeps every shot at its true aspect ratio. */
.photo-wall {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.photo-grid {
  columns: 2;
  column-gap: 8px;
}
@media (min-width: 700px)  { .photo-grid { columns: 3; } }
@media (min-width: 1100px) { .photo-grid { columns: 4; } }
@media (min-width: 1600px) { .photo-grid { columns: 5; } }

.photo-grid figure {
  margin: 0 0 8px;              /* multi-column has no row gap */
  /* keep a photo from being split across two columns */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  overflow: hidden;
  background: var(--paper-2);
}
.photo-grid img {
  width: 100%;
  height: auto;                 /* required, or the height attribute stretches it */
  display: block;
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.photo-grid figure:hover img { transform: scale(1.04); }

/* Scroll reveal. The hidden state is applied only once JS is running, so with
   JS off or broken every photo is simply visible. */
.js-reveal .photo-grid figure {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-reveal .photo-grid figure.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .photo-grid img,
  .photo-grid figure:hover img { transition: none; transform: none; }
  .js-reveal .photo-grid figure { opacity: 1; transform: none; transition: none; }
}
/* playlists */
.pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.6rem;
}
.pl-card {
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 1.4rem 1.5rem 1.5rem;
}
.pl-card h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.6rem; }
.pl-blurb { font-size: 0.92rem; margin-bottom: 1rem; }
.pl-card iframe { display: block; border: 2px solid var(--ink); border-radius: 12px; }
.pl-listen {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pl-listen:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.pl-listen:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

/* interviews */
.iv-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 760px;
}
.iv-card {
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 1.4rem 1.5rem 1.5rem;
}
.iv-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.9rem; }
.iv-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #000;
}
.iv-audio { display: block; width: 100%; }

/* merch ticket */
.merch-teaser { display: flex; justify-content: center; padding: 2rem 0; }
.ticket {
  border: 3px dashed var(--ink);
  background: var(--paper-2);
  box-shadow: var(--shadow);
  padding: 2rem 3rem;
  text-align: center;
  transform: rotate(-1.5deg);
  max-width: 420px;
}
.ticket-top {
  font-size: 0.72rem;
  letter-spacing: 0.5em;
  font-weight: 700;
  color: var(--rust);
}
.ticket-main {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0.7rem 0;
}
.ticket-bottom { font-size: 0.85rem; opacity: 0.75; }

/* ---------- footer ---------- */
footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.2rem 3rem;
  text-align: center;
  font-size: 0.88rem;
}
.foot-rule { border-top: 3px solid var(--ink); margin-bottom: 1.6rem; position: relative; }
.foot-rule::after {
  content: "🪕";
  position: absolute; top: -0.85em; left: 50%; transform: translateX(-50%);
  background: var(--paper); padding: 0 0.8em; font-size: 1.2rem;
}
.foot-submit { margin-top: 0.6rem; font-size: 0.95rem; }
.foot-submit a {
  color: var(--rust);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.foot-submit a:hover { color: var(--teal); }

@media (max-width: 560px) {
  .lead-card { padding: 1.5rem 1.4rem 1.3rem; }
  .card { transform: none; }
  .masthead nav { gap: 0.45rem; max-width: 21rem; margin-left: auto; margin-right: auto; }
  .masthead nav a {
    font-size: 0.7rem;
    padding: 0.5rem 0.85rem;
    letter-spacing: 0.1em;
  }
  .ticket { padding: 1.6rem 1.4rem; }
}