/* Underwater Turkey Bluesband — stylesheet

   A gig poster printed on black stock: warm near-black ground, cream ink,
   burnt-orange spot colour, heavy condensed display type and double rules.
   The portraits are pulled into a real duotone (greyscale image + a blended
   colour overlay) so the six photos, which were shot under very different
   lighting, read as one set; hovering restores the original.

   Everything sits on one scrolling page: the masthead stays full height at the
   top, while the strip holding the navigation — along with both of its rules —
   detaches and sticks to the top edge once it is scrolled past. */

:root {
  --bg: #0c0a08;
  --bg-raised: #141110;
  --ink: #e9dcc3;
  --ink-dim: #9a8b73;
  --line: #33291f;
  --accent: #d4562a;
  --accent-bright: #f2734a;
  --ochre: #c9932f;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Lora", Georgia, serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --max: 1060px;

  /* how long the sticky head takes to fold down. The content below slides up
     by the same amount of height over this time, so it also sets how gentle
     that movement feels — adjust here, it drives every part of the collapse. */
  --head-speed: 0.8s;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 4rem; } /* JS refines this to the measured nav height */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  /* The sticky head changes height when it collapses, which makes the document
     shorter. Scroll anchoring would "helpfully" pull the scroll position back
     by exactly that difference — which drops it under the collapse threshold,
     the head expands again, and the two states flicker against each other.
     Switching anchoring off lets the collapse animate cleanly instead.
     Safe here because every image reserves its space via width/height or
     aspect-ratio, so nothing else reflows on load. */
  overflow-anchor: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.75;
  background-color: var(--bg);
  /* faint paper-grain vignette, no image file needed */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(212, 86, 42, 0.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 3px);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-bright); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.skip { position: absolute; left: -9999px; background: var(--accent); color: #fff; padding: 0.6rem 1rem; }
.skip:focus { left: var(--gutter); top: 0.6rem; z-index: 100; }

/* ---------- sticky head: masthead + navigation ----------
   Both travel together and stay pinned to the top edge. Once the page is
   scrolled, site.js adds .is-compact: the tagline folds away, the wordmark
   shrinks and the logo moves from above the name to beside it. Only the
   properties below animate, so the switch is one flex-direction change. */

.site-top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 10, 8, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 3px double var(--line);
}

.masthead {
  text-align: center;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: 0.5rem;
  transition: padding-top var(--head-speed) ease, padding-bottom var(--head-speed) ease;
}
.masthead__logo {
  width: 68px; height: 49px; object-fit: contain; flex: none;
  transition: width var(--head-speed) ease, height var(--head-speed) ease;
}
.masthead__name {
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  text-decoration: none; color: inherit;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 6.4vw, 3.6rem); line-height: 0.98;
  letter-spacing: 0.02em; text-transform: uppercase;
  text-wrap: balance;
  transition: font-size var(--head-speed) ease, gap var(--head-speed) ease;
}
.masthead__tagline {
  margin: 0.7rem 0 0; color: var(--ochre);
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.6vw, 1.1rem);
  letter-spacing: 0.42em; text-transform: uppercase;
  max-height: 3rem; overflow: hidden;
  transition: max-height var(--head-speed) ease, opacity calc(var(--head-speed) * 0.8) ease, margin-top var(--head-speed) ease;
}

/* At the larger tagline size the line only just fits a 320px phone — 6px to
   spare. The tracking is what eats the width (0.42em over 23 characters), so
   ease it off there rather than let the line wrap: two lines need 50px and the
   max-height driving the collapse is 48px, so a wrap would be clipped. */
@media (max-width: 22em) {
  .masthead__tagline { letter-spacing: 0.24em; }
}

.site-top.is-compact .masthead { padding-top: 0.5rem; padding-bottom: 0.35rem; }
.site-top.is-compact .masthead__name {
  flex-direction: row; gap: 0.7rem;
  font-size: clamp(1.05rem, 3.4vw, 1.6rem);
}
.site-top.is-compact .masthead__logo { width: 34px; height: 25px; }
.site-top.is-compact .masthead__tagline { max-height: 0; opacity: 0; margin-top: 0; }

/* ---------- navigation strip ---------- */

.navbar { border-top: 3px double var(--line); }
.nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  /* row gap stays small and fixed — only the column gap should follow the
     viewport. A single value let the row gap grow to 2.75rem too, so on the
     widths where six entries wrap to two rows the pinned strip ballooned. */
  gap: 0.55rem clamp(1rem, 5vw, 2.75rem);
  list-style: none; margin: 0; padding: 0.85rem 0;
}
.nav a {
  color: var(--ink-dim); text-decoration: none;
  font-family: var(--font-display); font-size: 1.025rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  transition: color 0.18s;
}
.nav a:hover { color: var(--ink); }
.nav a.is-active { color: var(--accent-bright); }

/* On a phone six entries need two rows, and the strip is pinned for the whole
   visit — so tighten it there to give the content its screen back. */
@media (max-width: 33em) {
  .nav {
    gap: 0.5rem 0.9rem;
    padding: 0.55rem 0;
    font-size: 0.95em;
  }
  .nav a { font-size: 0.975rem; letter-spacing: 0.14em; }
}

/* ---------- page head ---------- */

.page-head { text-align: center; padding-block: clamp(2rem, 6vw, 3.25rem) clamp(1.25rem, 4vw, 2rem); }
.page-head h1 {
  font-family: var(--font-display); font-weight: 400;
  /* deliberately subordinate to the band name in the sticky head above —
     two display-sized lines stacked on top of each other fought each other */
  font-size: clamp(1.35rem, 4vw, 2.4rem); line-height: 1.05;
  /* a touch more tracking than before: condensed caps need it once they are
     no longer display-sized */
  letter-spacing: 0.06em; text-transform: uppercase; margin: 0;
  text-wrap: balance;
}
.page-head__sub {
  margin: 1rem auto 0; max-width: 46ch; color: var(--ink-dim);
  font-style: italic;
}
.stars { color: var(--accent); letter-spacing: 0.6em; font-size: 0.75rem; margin: 1.2rem 0 0; }

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

.section { padding-block: clamp(2rem, 6vw, 3.5rem); }
.section--bordered { border-top: 3px double var(--line); }

.section__head { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.section__head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1;
  letter-spacing: 0.01em; text-transform: uppercase; margin: 0;
  text-wrap: balance;
}
.section__head p { margin: 0.8rem auto 0; max-width: 46ch; color: var(--ink-dim); font-style: italic; }

.prose { max-width: 60ch; margin-inline: auto; }
.prose p { margin: 0 0 1.2rem; }
.prose p:last-child { margin-bottom: 0; }
.prose p:first-child::first-letter {
  float: left; font-family: var(--font-display); font-size: 3.4em; line-height: 0.78;
  padding: 0.06em 0.12em 0 0; color: var(--accent);
}
.prose .brand-word { color: var(--ochre); font-style: italic; }

.figure-frame { margin: 0; border: 1px solid var(--line); padding: 0.55rem; background: #000; }
.figure-frame figcaption {
  padding: 0.75rem 0.2rem 0.1rem; color: var(--ink-dim);
  font-family: var(--font-display); font-size: 0.7rem;
  letter-spacing: 0.24em; text-transform: uppercase; text-align: center;
}

/* ---------- members ---------- */

.members { list-style: none; margin: 0; padding: 0; }
.member {
  display: grid; gap: clamp(1rem, 3vw, 2.25rem);
  grid-template-columns: 1fr;
  padding-block: clamp(1.75rem, 5vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.member:first-child { border-top: 3px double var(--line); }
.member:last-child { border-bottom: 3px double var(--line); }

@media (min-width: 46em) {
  .member { grid-template-columns: 4.5rem minmax(0, 13rem) minmax(0, 1fr); align-items: start; }
  .member:nth-child(even) { background: linear-gradient(90deg, rgba(212, 86, 42, 0.045), transparent 70%); }
}

.member__no {
  font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2.6rem);
  line-height: 1; color: var(--accent); opacity: 0.85;
}
/* Phones: a full-width portrait made every member 671px tall — over four fifths
   of the screen, and 5.3 screens for the six of them. The portrait moves beside
   the name and instrument instead, while the bio keeps the full column width so
   it stays comfortable to read. Desktop keeps its own three-column row. */
@media (max-width: 45.99em) {
  .member__no { display: none; }

  .member {
    grid-template-columns: clamp(88px, 26vw, 116px) minmax(0, 1fr);
    grid-template-areas:
      "photo head"
      "bio   bio";
    column-gap: 1rem;
    row-gap: 0.9rem;
    align-items: start;
  }
  .member__photo { grid-area: photo; }
  /* lets the name block and the bio sit directly in the grid above */
  .member__body { display: contents; }
  .member__head { grid-area: head; }
  .member__bio { grid-area: bio; }
  .member__role { margin-bottom: 0; }
}

.member__photo { position: relative; margin: 0; background: #000; overflow: hidden; }
.member__photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%;
  filter: grayscale(1) contrast(1.08) brightness(0.95);
  transition: filter 0.35s;
}
.member__photo::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent); mix-blend-mode: color; opacity: 0.6;
  transition: opacity 0.35s; pointer-events: none;
}
.member:hover .member__photo img { filter: none; }
.member:hover .member__photo::after { opacity: 0; }

/* A touch screen has no hover — the colour would only appear after a tap. There
   the portrait reveals itself once it has scrolled into view instead; site.js
   sets .is-visible. Desktop keeps the hover behaviour untouched. */
@media (hover: none), (pointer: coarse) {
  .member.is-visible .member__photo img { filter: none; }
  .member.is-visible .member__photo::after { opacity: 0; }
}
.member[data-kind="mascot"] .member__photo img { object-fit: contain; padding: 12%; filter: none; }
.member[data-kind="mascot"] .member__photo::after { opacity: 0; }

.member__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 4.5vw, 2.2rem); line-height: 1.02;
  letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 0.35rem;
}
.member__role {
  margin: 0 0 0.9rem; color: var(--ochre);
  font-family: var(--font-display); font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.member__bio { margin: 0; color: var(--ink-dim); }

/* ---------- gallery ---------- */

.gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}
.gallery__open {
  display: block; width: 100%; padding: 0; margin: 0; cursor: pointer;
  background: #000; border: 1px solid var(--line);
  transition: border-color 0.2s;
}
.gallery__open:hover { border-color: var(--accent); }
.gallery__open img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.92);
  transition: filter 0.3s;
}
.gallery__open:hover img, .gallery__open:focus-visible img { filter: none; }

.lightbox {
  border: 0; padding: 0; margin: auto;
  max-width: min(94vw, 1400px); max-height: 94vh;
  background: var(--bg-raised); color: var(--ink);
  overflow: visible;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.88); }
.lightbox__figure { margin: 0; }
.lightbox__image { max-width: 100%; max-height: calc(94vh - 3.5rem); margin-inline: auto; }
.lightbox__caption {
  padding: 0.85rem 1rem; text-align: center; color: var(--ink-dim);
  font-size: 0.9rem; font-style: italic; min-height: 1rem;
}
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 1;
  background: rgba(12, 10, 8, 0.8); color: var(--ink);
  border: 1px solid var(--line); cursor: pointer;
  font-family: var(--font-body); line-height: 1;
  transition: background-color 0.2s, color 0.2s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--accent); color: #fff; }
.lightbox__close { top: 0.5rem; right: 0.5rem; width: 2.2rem; height: 2.2rem; font-size: 1.5rem; }
.lightbox__nav {
  top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 3.4rem; font-size: 2rem;
}
.lightbox__nav--prev { left: 0.5rem; }
.lightbox__nav--next { right: 0.5rem; }
.lightbox__nav[hidden] { display: none; }

/* ---------- sound ---------- */

.tracks { list-style: none; margin: 0; padding: 0; counter-reset: track; }
.track { padding-block: 1.1rem; border-top: 1px solid var(--line); }
.track:first-child { border-top: 0; }
.track__head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.15rem 0.75rem;
  margin: 0 0 0.6rem;
}
.track__no {
  font-family: var(--font-display); color: var(--accent);
  font-size: 1.1rem; min-width: 1.4rem;
}
.track__title { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.01em; text-transform: uppercase; }
.track__note { color: var(--ink-dim); font-size: 0.85rem; font-style: italic; }
.track__player { width: 100%; height: 2.4rem; }

/* ---------- contact ---------- */

.contact-list { list-style: none; margin: 0 auto 2.5rem; padding: 0; max-width: 34rem; text-align: center; }
.contact-list li { border-top: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 1px solid var(--line); }
.contact-list a {
  display: block; padding: 1.3rem 0.5rem; text-decoration: none; color: var(--ink);
  transition: background-color 0.2s;
}
.contact-list a:hover { background: rgba(212, 86, 42, 0.08); }
.contact-list .label {
  display: block; color: var(--ink-dim);
  font-family: var(--font-display); font-size: 0.66rem;
  letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 0.3rem;
}
.contact-list .value { font-family: var(--font-display); font-size: clamp(1.1rem, 3.2vw, 1.5rem); letter-spacing: 0.02em; }

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

.site-footer { border-top: 3px double var(--line); padding-block: 2.25rem; text-align: center; margin-top: clamp(2rem, 6vw, 4rem); }
.social { list-style: none; display: flex; justify-content: center; gap: 1.5rem; margin: 0 0 1.1rem; padding: 0; }
.social a { color: var(--ink-dim); display: block; transition: color 0.2s; }
.social a:hover { color: var(--accent-bright); }
.social svg { width: 20px; height: 20px; }
.colophon {
  margin: 0; color: var(--ink-dim);
  font-family: var(--font-display); font-size: 0.68rem;
  letter-spacing: 0.24em; text-transform: uppercase;
}
.note { color: var(--ink-dim); font-size: 0.9rem; text-align: center; }