/* The Wholehearted — holding page
   Forest green and antique brass from the press pack, kraft paper from the photographs.
   Tokens match the full site (styles.css in git history) so the two can swap cleanly. */

:root {
  --pine: #1b2a1e;
  --pine-2: #223122;
  --moss: #2f4732;
  --brass: #d3b687;
  --brass-2: #b8975f;
  --bone: #ede5d3;
  --bone-2: #c7bda9;
  --kraft: #c9a77c;
  --ink: #182319;
  --ink-2: #3f4a3c;

  --serif: "Newsreader", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.15rem, 4.5vw, 2.75rem);
  --wide: 76rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
  color-scheme: dark;
  background: var(--pine);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--pine);
  color: var(--bone);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 900px) {
  body { font-size: 1.125rem; }
}

img, picture { display: block; max-width: 100%; }
img { height: auto; }

h1 { font-family: var(--serif); font-weight: 400; margin: 0; }
p { margin: 0; }

a { color: var(--brass); text-underline-offset: .14em; text-decoration-thickness: 1px; }
a:hover { color: var(--bone); }

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

.nowrap { white-space: nowrap; }

/* Buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1;
  padding: .95em 1.6em 1.15em;
  border-radius: 3px;
  background: var(--brass);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { background: var(--bone); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-ink:hover { background: var(--pine); color: var(--brass); }

.text-link {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--bone-2);
  text-decoration: underline;
  text-decoration-color: var(--brass-2);
  text-underline-offset: .2em;
  padding: .55rem 0;
}
.text-link:hover { color: var(--bone); }

/* Live — poster beside the listing, bio beneath it. */

.live {
  background: var(--pine);
  color: var(--bone);
  padding: clamp(2rem, 6vw, 5rem) var(--gutter) clamp(3.5rem, 9vw, 7rem);
}

.live-inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
.live-inner > .poster, .live-inner > .bio { margin-top: .75rem; }

/* Below 900px the details wrapper dissolves so the grid can put the
   heading and ticket button ahead of the poster, and the bio after it. */
.live-details { display: contents; }
.live-details > h1 { order: 1; }
.gig { order: 2; }
.poster { order: 3; }
.bio { order: 4; }

.poster {
  margin: 0;
  width: 100%;
  max-width: 30rem;
}
.poster img {
  width: 100%;
  border: 1px solid var(--brass-2);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7);
}

h1 {
  font-size: clamp(1.75rem, 4.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--brass);
  margin-bottom: 0;
  text-wrap: balance;
}

.gig {
  border-top: 1px solid var(--brass-2);
  border-bottom: 1px solid var(--brass-2);
  padding: 1.5rem 0 1.75rem;
  display: grid;
  gap: 1.5rem;
}

.gig-date {
  font-size: clamp(2.4rem, 10vw, 4.75rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--bone);
  margin: 0 0 .6rem -.03em;
}
.gig-venue {
  font-size: clamp(1.25rem, 4.4vw, 1.85rem);
  line-height: 1.2;
  margin-bottom: .5rem;
  max-width: 24ch;
  text-wrap: pretty;
}
.gig-time {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--bone-2);
}

.gig-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
}

.bio {
  margin-top: 0;
}
.bio p {
  max-width: 62ch;
  font-size: 1.05em;
  line-height: 1.6;
  color: var(--bone-2);
  text-wrap: pretty;
}
.bio p + p { margin-top: 1em; }
.bio-lede { color: var(--bone); }

@media (min-width: 900px) {
  .live-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .live-details { display: block; }
  .live-details > h1 { margin-bottom: 1rem; }
  .poster { order: 0; }
  .live-inner > .poster { margin-top: 0; }
  .poster { max-width: none; position: sticky; top: 2rem; }
  .gig { padding: 2rem 0 2.25rem; gap: 2.25rem; }
  .gig-date { font-size: clamp(3rem, 5.6vw, 4.75rem); }
  .bio { margin-top: 2.5rem; }
}

/* Footer */

.footer {
  border-top: 1px solid var(--moss);
  padding: 2.5rem var(--gutter) 3rem;
  text-align: center;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--bone-2);
}
.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .9rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .75rem;
  margin-bottom: .75rem;
}
.footer-links a { color: var(--bone-2); text-decoration: none; padding: .6rem .5rem; }
.footer-links a:hover { color: var(--brass); }