/* ==========================================================================
   Solares Band — site.css
   Hand-written. No framework. Mobile-first.
   Palette and type tokens are documented in docs/design-system.md
   ========================================================================== */

@font-face {
  font-family: "akaDora";
  src: url("/assets/fonts/akaDora.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* ink + grounds */
  --black: #000;
  --off-black: #0a0a0a;
  --hairline: #2a0f0f;

  /* the band's colors, all carried over from the 2016 site */
  --maroon: #490f0f;
  --maroon-deep: #550b0d;
  --plum: #58194a;
  --plum-deep: #4a1540;
  --cream: #fdf8b3;
  --cream-soft: #fff9af;
  --lemon: #fff8b2;
  --mustard: #f1dc64;
  --cyan: #1386a7;
  --white: #fff;

  /* type */
  --face-display: "akaDora", "Brush Script MT", cursive;
  --face-ui: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --face-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --step--1: 0.9375rem;
  --step-0: clamp(1.0625rem, 0.99rem + 0.38vw, 1.25rem);
  --step-1: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.33rem + 0.85vw, 2rem);

  --display-1: clamp(2.75rem, 1.6rem + 5.8vw, 6rem);
  --display-2: clamp(2.25rem, 1.45rem + 4vw, 4.5rem);
  --display-3: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);

  --lh-body: 1.6;
  --lh-display: 1.02;
  --measure: 68ch;

  /* spacing */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;
  --band-y: clamp(3rem, 7vw, 5.5rem);

  --shell: 68rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 300ms;
}

/* ----------------------------------------------------------------- base -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--face-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a { color: var(--cyan); }
a:hover { color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  left: var(--s-3);
  top: -4rem;
  z-index: 100;
  padding: 0.6em 1em;
  background: var(--cream);
  color: var(--maroon);
  font-family: var(--face-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-3); }

/* --------------------------------------------------------------- layout -- */

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

.shell--wide { max-width: 78rem; }

.band {
  padding-block: var(--band-y);
}
.band--flush { padding-block: 0; }
.band--head { padding-block: var(--band-y) 0; }
.band--cyan { background: var(--cyan); color: var(--black); }
.band--mustard { background: var(--mustard); color: var(--black); }
.band--lemon { background: var(--lemon); color: var(--plum-deep); }
.band--plum { background: var(--plum); color: var(--white); }
.band--carbon { background: #141414; }

.band--cyan a,
.band--mustard a,
.band--lemon a { color: var(--maroon-deep); }

.prose {
  max-width: var(--measure);
}
.prose--center { margin-inline: auto; }
.prose p { margin: 0 0 var(--s-4); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }

.stack > * + * { margin-top: var(--s-4); }

/* ----------------------------------------------------------------- type -- */

.display {
  font-family: var(--face-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: 0.01em;
  color: var(--cream);
  margin: 0;
  overflow-wrap: break-word;
}
.display--1 { font-size: var(--display-1); }
.display--2 { font-size: var(--display-2); }
.display--3 { font-size: var(--display-3); }
.display--center { text-align: center; }
.display--ink { color: var(--black); }
.display--plum { color: var(--plum-deep); }

/* akaDora sits high in its em box; give whatever follows a real gap. */
.display + .prose,
.display + .dress,
.display + .bio,
.display + .track,
.display + .tracklist,
.display + .embed,
.display + .rule { margin-top: var(--s-5); }

.tracklist + .display,
.track + .display,
.prose + .display { margin-top: var(--s-6); }

.rule {
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.28;
  margin: var(--s-5) 0;
}

.label {
  font-family: var(--face-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

/* -------------------------------------------------------------- masthead -- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--black);
  border-bottom: 1px solid var(--hairline);
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  max-width: 78rem;
  margin-inline: auto;
  padding: 0.6rem var(--gutter);
}

.brand { display: block; line-height: 0; }
.brand img {
  display: block;
  width: auto;
  height: clamp(1.875rem, 5.2vw, 3.25rem);
}

.navbtn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--cyan);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.navbtn:hover { color: var(--cream); border-color: var(--maroon); }
.navbtn__icon {
  width: 1.5rem; height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ---------------------------------------------------------------- drawer -- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  border: 0;
}
.scrim[hidden] { display: none; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(21rem, 86vw);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-3) var(--s-5) var(--s-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #111;
  border-left: 4px solid var(--maroon);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
}

.drawer__close {
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}
.drawer__close svg {
  width: 1.4rem; height: 1.4rem;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

.drawer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer__nav li + li { margin-top: var(--s-2); }
.drawer__nav a {
  display: block;
  padding: 0.35em 0;
  font-family: var(--face-ui);
  font-weight: 700;
  font-size: var(--step-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--white);
  transition: color var(--dur) var(--ease);
}
.drawer__nav a:hover { color: var(--cream); }
.drawer__nav a[aria-current="page"] { color: var(--cyan); }

.btn--drawer { align-self: flex-start; }

/* The shadow only exists while the drawer is on screen — parked off-canvas it
   would cast back across the right edge of every page. */
body.nav-open .drawer {
  transform: translateX(0);
  box-shadow: -1.5rem 0 3rem rgba(0, 0, 0, 0.65);
}
body.nav-open .scrim { opacity: 1; }
body.nav-open { overflow: hidden; }

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

.btn {
  display: inline-block;
  padding: 0.7em 1.7em;
  border: 2px solid var(--cream-soft);
  background: transparent;
  color: var(--cyan);
  font-family: var(--face-ui);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover {
  background: var(--cream-soft);
  color: var(--maroon-deep);
}

/* ---------------------------------------------------------------- frame -- */
/* The signature component: a photograph in a maroon mount with a plum mat
   and a cream fillet — lifted from the 2016 homepage band portrait. */

.frame {
  background: var(--maroon);
  padding: clamp(0.6rem, 2.4vw, 1.75rem);
}
.frame__mat {
  background: var(--plum);
  padding: clamp(0.45rem, 1.6vw, 1.1rem);
  box-shadow: inset 0 0 0 1px rgba(253, 248, 179, 0.55);
}
.frame img {
  display: block;
  width: 100%;
  height: auto;
}

.frame--portrait { max-width: 20rem; }

/* ------------------------------------------------------------- homepage -- */

.hero {
  padding: 0;
  background: var(--maroon-deep);
}
/* The photo is capped at its natural 1728px; past that it centers and the
   maroon ground continues its baked-in edge. */
.hero img {
  display: block;
  margin-inline: auto;
}
.hero .frame { padding: clamp(0.5rem, 2vw, 1.5rem); }

.cta {
  background: var(--black);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  border-top: 1px solid var(--hairline);
}
.cta__grid {
  display: grid;
  gap: var(--s-4);
  align-items: center;
}
.cta__head {
  margin: 0;
  max-width: 26ch;
  color: var(--cyan);
  font-family: var(--face-ui);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.dress {
  display: grid;
  gap: var(--s-5);
}
.dress__figure {
  margin: 0;
  justify-self: center;
  max-width: 12rem;
}
/* The silhouette is 512x1650 — tall enough to blow out the section if it is
   sized by width, so it is capped by height and the column follows it. */
.dress__figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(17rem, 46vw, 27rem);
  margin-inline: auto;
}

/* ----------------------------------------------------------------- bios -- */

.bio {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-5);
}
.bio + .bio { border-top: 1px solid rgba(253, 248, 179, 0.22); }
.bio__name {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--cream);
  font-family: var(--face-ui);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.portrait {
  display: block;
  width: 100%;
  height: auto;
  max-width: 15rem;
}
.portrait--round { border-radius: 50%; }

/* -------------------------------------------------------------- bookings -- */

.booking { display: grid; gap: var(--s-6); }
.booking__contact { display: grid; gap: var(--s-3); }
.booking__contact p { margin: 0; }
.booking__form {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
  max-width: 34rem;
}
.booking__form .btn { justify-self: start; }

.videos { display: grid; gap: var(--s-4); }

/* ---------------------------------------------------------------- media -- */

.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--off-black);
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed--calendar { aspect-ratio: 4 / 3; }

.track {
  margin: 0 0 var(--s-4);
}
.track__title {
  margin: 0 0 var(--s-2);
  font-family: var(--face-ui);
  font-weight: 500;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cream);
}
/* Native audio controls ship as a near-white pill. Inverting sinks them into
   the black ground and lifts the glyphs to light, with no custom player to
   maintain and no loss of keyboard or screen-reader support. */
.track audio {
  display: block;
  width: 100%;
  max-width: 30rem;
  filter: invert(0.88);
}

.tracklist {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  padding: 0;
  margin: 0;
  list-style: none;
}

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

.field {
  width: 100%;
  padding: 0.75em 0.9em;
  border: 1px solid rgba(253, 248, 179, 0.45);
  background: #111;
  color: var(--white);
  font-family: var(--face-body);
  font-size: var(--step-0);
  line-height: 1.4;
}
.field::placeholder { color: rgba(255, 255, 255, 0.55); opacity: 1; }
.field:focus { border-color: var(--cream); }

textarea.field { min-height: 9rem; resize: vertical; }

.botcheck {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------- signup -- */

.signup {
  padding-block: var(--band-y);
  background: var(--black);
  border-top: 3px solid var(--maroon);
}
.signup__grid {
  display: grid;
  gap: var(--s-5);
}
.signup__head {
  margin: 0;
  max-width: 27ch;
  color: var(--cyan);
  font-family: var(--face-ui);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.signup__form {
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.btn--signup { justify-self: start; }

.signup__thanks {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--cream);
  background: rgba(253, 248, 179, 0.08);
  color: var(--cream);
  font-size: var(--step-1);
}

/* ------------------------------------------------------------ colophon --- */

.colophon {
  padding-block: var(--s-5);
  border-top: 1px solid var(--hairline);
  background: var(--black);
}
.colophon p {
  margin: 0;
  font-family: var(--face-ui);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------ 404 page --- */

.notfound {
  padding-block: clamp(4rem, 14vw, 9rem);
  text-align: center;
}
.notfound .btn { margin-top: var(--s-5); }

/* ----------------------------------------------------------- wide views -- */

@media (min-width: 48em) {
  .cta__grid {
    grid-template-columns: 1fr auto;
    gap: var(--s-6);
  }
  .dress {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s-7);
  }
  .dress__figure { max-width: none; justify-self: end; }
  .bio {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }
  .signup__grid {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    gap: var(--s-7);
    align-items: start;
  }
  .signup__head { font-size: var(--step-2); }
  .tracklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .booking { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
}

@media (min-width: 64em) {
  .tracklist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- motion -- */

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

/* ==========================================================================
   Shows, Photos/Videos, Bookings
   Appended block. Everything below belongs to those three pages.
   ========================================================================== */

/* An author-set `display` beats the UA stylesheet's [hidden] rule. Both forms
   on the site are grids, so site.js setting form.hidden = true showed the
   thank-you message and left the form standing underneath it — on ?sent=1 and
   on ?subscribed=1 both. */
[hidden] { display: none !important; }

/* ------------------------------------------------- framed third-party UI -- */
/* The Google calendar and the YouTube players are the only foreign chrome on
   the site — white Google UI and a red play button floating on the band's
   color. Putting them in the same maroon mount the homepage portrait uses
   makes them read as things hung on the wall rather than widgets dropped in.
   The mount is tighter than the photo frame: a moving image does not want as
   much matting as a still one. */

.frame--media { padding: clamp(0.5rem, 1.6vw, 1rem); }
.frame--media .frame__mat { padding: clamp(0.35rem, 0.9vw, 0.6rem); }

/* akaDora sits high in its em box, so anything after a .display needs the gap
   spelled out — same rule as the existing .display + * list. */
.display + .frame,
.display + .videos { margin-top: var(--s-5); }

/* ---------------------------------------------------------------- shows -- */

/* A calendar is not a 16:9 object; it wants as much height as the viewport can
   spare. Month view needs roughly 40rem before the day cells stop being able
   to show an event, and beyond 50rem the grid just stretches. */
/* Agenda view is a list, not a grid — it does not need the height the month
   view does, and an empty month of agenda is a lot of white. */
.embed--calendar {
  aspect-ratio: auto;
  height: 26.25rem;
}

@media (min-width: 48em) {
  .embed--calendar { height: clamp(30rem, 70vh, 50rem); }
}

/* The noscript month view replaces the scripted one in the same box. */
.embed--calendar noscript iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------- videos -- */

.videos { align-items: start; }

/* -------------------------------------------------------------- bookings -- */

/* The form is a distinct object on an otherwise black page, so it gets the
   same treatment the mailing-list band uses: recessed ground, one hairline,
   a 3px maroon top edge. No radius, no shadow — the site has neither. */
.booking__form {
  max-width: 38rem;
  padding: var(--s-5) var(--s-4);
  background: var(--off-black);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--maroon);
}

/* rows="10" is kept for the no-CSS case but it sizes the box to roughly 300px,
   which leaves the panel mostly empty field. Height is set here instead. */
.booking__form textarea.field {
  height: clamp(9rem, 26vh, 14rem);
  min-height: 9rem;
}

/* The ?sent=1 state replaces the form, so it has to carry the same weight:
   the frame again, cream on plum, at reading size. */
.sent {
  margin-top: var(--s-5);
  max-width: 38rem;
}
.sent__note {
  margin: 0;
  padding: var(--s-5) var(--s-4);
  color: var(--cream);
  font-size: var(--step-1);
  line-height: 1.45;
}

@media (min-width: 48em) {
  .booking__form { padding: var(--s-5); }
  .sent__note { padding: var(--s-6) var(--s-5); }
}

/* ----------------------------------------------------------------- Bios -- */
/* The roster. One framed portrait per member, alternating left and right on
   wide screens; photo first and full width when stacked. Names are set in
   akaDora because each member is billed like a headliner, not listed like
   staff. Namespaced .member/.roster so the older .bio/.portrait rules above,
   which the bookings page still uses, are left alone. */

.roster-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  max-width: 48rem;
  margin: var(--s-5) auto 0;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(253, 248, 179, 0.3);
  font-family: var(--face-ui);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.05em;
}
/* Cyan on plum is far too close in value; cream carries these. */
.band--plum .roster-jump a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.band--plum .roster-jump a:hover,
.band--plum .roster-jump a:focus-visible {
  color: var(--white);
  border-bottom-color: currentColor;
}

.roster {
  display: grid;
}

.member {
  display: grid;
  gap: var(--s-4);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.member + .member { border-top: 1px solid rgba(253, 248, 179, 0.18); }

/* Stacked, the portrait takes the full measure of the column — capping it at
   19rem here would leave a dead strip down the right at 390. */
.member__figure {
  margin: 0;
}
.member__figure .frame { padding: clamp(0.5rem, 2.6vw, 0.9rem); }
.member__figure .frame__mat { padding: clamp(0.35rem, 1.8vw, 0.6rem); }

.member__head {
  margin: 0 0 var(--s-4);
}
.member__name {
  display: block;
  font-family: var(--face-display);
  font-weight: 400;
  font-size: var(--display-3);
  line-height: 1.08; /* akaDora's descenders need more room than --lh-display */
  letter-spacing: 0.01em;
  color: var(--cream);
}
.member__role {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--face-ui);
  font-weight: 500;
  font-size: var(--step-0);
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--cyan);
}

/* The sticky masthead would otherwise sit on top of a jumped-to name. */
.member__head[id] { scroll-margin-top: clamp(4.5rem, 10vw, 6.5rem); }

@media (min-width: 48em) {
  .member {
    grid-template-columns: 19rem minmax(0, 1fr);
    gap: var(--s-7);
    align-items: start;
  }
  .member__figure { max-width: 19rem; }
  /* Flip every second member so the page reads down in a zigzag. The track
     sizes have to swap with the content, or the photo lands in the text
     column and stretches. */
  .member:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }
  .member:nth-child(even) .member__figure {
    grid-column: 2;
    grid-row: 1;
  }
  .member:nth-child(even) .member__body {
    grid-column: 1;
    grid-row: 1;
  }
}