:root {
  --espresso: #241812;
  --ink: #2B1E16;
  --ink-soft: #5A4636;
  --cream: #F3E9D6;
  --paper: #FBF5EA;
  --white: #FFFDF8;
  --teal: #2F5D5A;
  --teal-line: #5C8580;
  --teal-text: #DCE6E2;
  --gold: #E9C77F;
  --clay: #C8662F;
  --rust: #8E3F1E;
  --blue: #2F5F8F;
  --serif: 'Young Serif', Georgia, serif;
  --sans: Karla, 'Helvetica Neue', Arial, sans-serif;
  --gutter: max(16px, 5vw);
}
* { box-sizing: border-box; }
/* Espresso behind everything, so pulling past the top or bottom of the page shows brown */
html { scroll-behavior: smooth; background: var(--espresso); }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--espresso); line-height: 1.5; }
img, video { display: block; max-width: 100%; }
a { color: var(--ink); }
a:hover { color: var(--rust); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.05; text-wrap: balance; }
h2 { font-size: clamp(34px, 4.5vw, 58px); }
p { margin: 0; }
/* Section spacing shrinks on narrow screens and reaches full size at 960px wide */
.section { padding: clamp(56px, 10vw, 96px) var(--gutter); background: var(--cream); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: clamp(24px, 4vw, 40px); }
.section-head p { max-width: 420px; font-size: 18px; color: var(--ink-soft); }
.eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 700; text-decoration: none; padding: 16px 28px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; }
.btn-light { background: var(--cream); color: var(--espresso); }
.btn-light:hover { background: #fff; color: var(--espresso); }
.btn-outline-light { color: var(--cream); border-color: var(--cream); }
.btn-outline-light:hover { background: rgba(243,233,214,0.12); color: var(--cream); }
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: var(--espresso); color: #fff; }
.btn-blue { background: var(--blue); color: var(--cream); }
.btn-blue:hover { background: #264E77; color: #fff; }

/* Hero */
/* The hero fills the window, so the next section never peeks in as an empty strip.
   lvh is the height with a phone's browser toolbars shrunk; svh would leave a
   strip at the bottom once they shrink. On very tall windows it stops at 1000px,
   leaving at least 200px for the next section's headings to show. */
.hero { position: relative; min-height: 100lvh; display: flex; flex-direction: column; color: var(--cream); background: var(--espresso); overflow: hidden; }
/* Down arrow at the bottom of the hero. On tall windows the next section is
   already in view, so it isn't needed. */
.scroll-cue { position: absolute; left: 50%; bottom: 20px; width: 48px; height: 48px; margin-left: -24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--cream); opacity: 0.75; animation: nudge 2.4s ease-in-out infinite; }
.scroll-cue:hover { opacity: 1; color: var(--cream); background: rgba(243,233,214,0.12); }
@keyframes nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(6px); } }
@media (min-height: 1200px) { .hero { min-height: 1000px; } .scroll-cue { display: none; } }
.hero video, .hero .shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero video { object-fit: cover; }
/* Fades to solid espresso at the top (the garage ceiling) and bottom (behind the copy) */
.hero .shade { background: linear-gradient(to bottom, rgba(36,24,18,0.85) 0%, rgba(36,24,18,0.6) 8%, rgba(36,24,18,0.45) 18%, rgba(36,24,18,0.45) 50%, rgba(36,24,18,0.75) 72%, #241812 100%); }
/* Film grain over the tinted video, under the text */
.hero .grain {
  position: absolute;
  pointer-events: none;
  inset: -50%;
  background-image: url("../media/grain.png");
  opacity: 0.14;
  mix-blend-mode: overlay;
  animation: grain 0.6s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-3%, 2%); } 33% { transform: translate(2%, -4%); }
  50% { transform: translate(-4%, -1%); } 67% { transform: translate(3%, 3%); } 83% { transform: translate(-1%, 4%); } 100% { transform: translate(0, 0); }
}
.site-header { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 36px var(--gutter) 0; }
.logo { font-family: var(--serif); font-size: 36px; color: var(--cream); text-decoration: none; }
.logo:hover { color: var(--cream); }
.site-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; font-weight: 500; }
.site-header nav a { color: var(--cream); text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; color: var(--cream); }
.site-header nav .btn { padding: 10px 20px; }
/* The top padding keeps the copy clear of the header when the copy is taller than the window */
.hero-body { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; padding: 1.5em var(--gutter) 88px; }
.hero-body .eyebrow { color: var(--gold); }
.hero h1 { font-size: clamp(38px, 5.4vw, 76px); max-width: 1100px; text-wrap: balance; }
/* Hero text in three sizes: big headline, small body, medium payoff line */
.hero-lead { max-width: 860px; }
.hero-lead p, .hero-lead li { font-size: 20px; line-height: 1.5; color: #EDE3D1; text-wrap: pretty; }
.hero-lead ul { margin: 0; padding: 0; list-style: none; }
.hero-lead li { font-size: clamp(20px, 1.9vw, 24px); }
.hero .payoff { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; color: var(--gold); }
.hero-intro p { font-size: 20px; max-width: 620px; color: #EDE3D1; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
/* On wider screens the social links sit in the bottom right corner, level with
   the scroll arrow, so the copy above can sit lower. Phones keep them under the
   copy, where they don't collide with the arrow. */
@media (min-width: 700px) {
  .hero-actions { position: absolute; right: var(--gutter); bottom: 20px; }
}
.social-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.social-links a { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--cream); border-radius: 50%; color: var(--cream); }
.social-links a:hover { background: var(--clay); border-color: var(--clay); color: #fff; }

/* Three panels answering the hero's three questions */
.answer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); }
.answer { display: flex; flex-direction: column; gap: 14px; }
.answer .eyebrow { color: var(--rust); }
/* Sized so the first line of each heading fits its column with room to spare */
.answer h2 { font-size: clamp(22px, 2.2vw, 34px); }
.answer p { max-width: 60ch; font-size: 18px; color: var(--ink-soft); text-wrap: pretty; }
.answer .song-line { font-family: var(--serif); color: var(--rust); }
.answer .song-line span { white-space: nowrap; }
@media (max-width: 1080px) {
  .answer-grid { grid-template-columns: 1fr; gap: 40px; }
  .answer h2 { font-size: 26px; }
}

/* Watch: gold, matching the hero's payoff line, with the player kept dark */
.watch { background: var(--gold); color: var(--ink); }
.watch .section-head p { color: var(--ink); }
.watch .clip { color: var(--ink); }
.watch .clip .a { color: #4A3828; }
.watch .clip[aria-pressed="true"] img { outline-color: var(--espresso); }
.watch .clip:focus-visible { outline-color: var(--espresso); outline-offset: 4px; }
.player { background: var(--espresso); border-radius: 22px; overflow: hidden; }
.player video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.player-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 16px 22px; color: var(--cream); }
.player-caption strong { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.player-caption span { color: #CDBFA8; }
.clips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; margin-top: 16px; }
.clip { font: inherit; text-align: left; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.clip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; outline: 3px solid transparent; outline-offset: 2px; }
.clip[aria-pressed="true"] img { outline-color: var(--clay); }
.clip .t { font-weight: 700; }
.clip .a { font-size: 15px; color: var(--ink-soft); margin-top: -6px; }

/* Band */
.band-wrap { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 48px); align-items: center; }
.band-photo { flex: 1 1 520px; border-radius: 20px; overflow: hidden; }
.band-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.band-text { flex: 1 1 300px; }
.band-list { margin: 0; padding: 0; list-style: none; }
.band-list li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #D8C9AE; font-size: 19px; }
.band-list .role { color: var(--ink-soft); }
.band-note { margin-top: 20px; font-size: 16px; color: var(--ink-soft); }

/* Events: what we play for, a button back up to the form, then the towns in
   small print (they're there for search engines). Gold, like Watch, with ink
   text and darker rules for contrast. */
.events { background: var(--gold); }
/* Phones stack text, list, button, towns. Wider screens put the text, button
   and towns on the left and the list on the right; the towns' row soaks up any
   extra height so the left column stays together at the top. */
.events-grid { display: grid; grid-template-areas: "text" "list" "book" "towns"; gap: 28px; }
@media (min-width: 900px) {
  .events-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "text list" "book list" "towns list"; column-gap: clamp(28px, 5vw, 72px); }
}
/* The text, button and towns share one width, so the button centers under the text */
.events-text, .events-book, .events-towns { max-width: 34rem; }
.events-text { grid-area: text; display: flex; flex-direction: column; gap: 20px; }
/* Justified beside the list, so both edges line up and the button looks centered
   under the text. Phones keep ragged text, since justifying a narrow column
   leaves gaps and breaks words. */
@media (min-width: 900px) { .events-text p, .events-towns { text-align: justify; hyphens: auto; } }
.events-text p { font-size: 19px; color: var(--ink); text-wrap: pretty; }
.events-list { grid-area: list; align-self: start; display: flex; flex-direction: column; gap: 8px; }
.events-list .eyebrow { color: var(--rust); }
.events-list ul { margin: 0; padding: 0; list-style: none; }
.events-list li { padding: 14px 0; font-size: 19px; }
/* Rules only between items */
.events-list li + li { border-top: 1px solid rgba(43,30,22,0.25); }
.events-book { grid-area: book; text-align: center; }
.events-towns { grid-area: towns; align-self: start; font-size: 14px; color: var(--ink); text-wrap: pretty; }

/* Book */
.book { background: var(--teal); color: var(--cream); display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 56px) 56px; }
.book-intro { flex: 1 1 320px; display: flex; flex-direction: column; gap: 24px; }
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.steps li { display: flex; gap: 16px; align-items: baseline; font-size: 18px; color: var(--teal-text); }
.steps .n { font-family: var(--serif); font-size: 32px; color: var(--gold); min-width: 24px; }
.steps strong { color: var(--cream); }
.book-intro a:not(.btn) { color: var(--gold); }
.book-intro .btn { align-self: flex-start; }
/* Once the form drops below the intro (the flex-basis widths plus the gap no
   longer fit), center the one-sheet button in the column */
@media (max-width: 906px) { .book-intro .btn { align-self: center; } }
.book form { flex: 1 1 440px; background: var(--paper); color: var(--ink); border-radius: 22px; padding: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.book label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.book .full { grid-column: 1 / -1; }
.book input, .book textarea { font: inherit; padding: 14px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--white); color: var(--ink); }
.book textarea { resize: vertical; }
.book .hint { display: block; font-weight: 400; font-size: 15px; color: var(--ink-soft); }
.book .extras { margin: 4px 0 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
.book .extras legend { padding: 0; margin-bottom: 10px; font-weight: 500; }
.book .check { flex-direction: row; align-items: flex-start; gap: 12px; font-weight: 400; cursor: pointer; }
.book .check input { width: 22px; height: 22px; padding: 0; margin: 2px 0 0; accent-color: var(--rust); flex: none; }
.book button { grid-column: 1 / -1; font: inherit; font-weight: 700; font-size: 18px; padding: 18px; border: 0; border-radius: 999px; background: var(--rust); color: #FFF8EC; cursor: pointer; }
.book button:hover { background: #7A3518; }
.book button:disabled { opacity: 0.7; cursor: default; }
.book .form-status { grid-column: 1 / -1; font-weight: 500; text-align: center; }
.book .form-status:empty { display: none; }

/* Footer */
footer { background: var(--espresso); color: #E8DCC6; padding: 48px var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
footer .logo { font-size: 28px; }
footer .footer-line { font-family: var(--serif); font-size: 20px; }
footer .payoff::before { content: "· "; }
/* On phones the payoff line goes under the name, without the dot */
@media (max-width: 640px) {
  footer .payoff { display: block; }
  footer .payoff::before { content: none; }
}
footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
footer nav a { color: #E8DCC6; }
footer nav a:hover { color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .grain, .scroll-cue { animation: none; }
}