/* ================================================================
   theme.css — BASH CANCER FEST
   YouGrow port of the Astro + Tailwind original.

   Every value here (colors, fonts, spacing, text sizes, shadows,
   breakpoints, hover states) was extracted from the original site's
   compiled Tailwind CSS so the computed result is identical.

   Palette:
     primary-500  #8ec63f   primary-600  #75a434   primary-700  #5e832a
     primary-100  #dcedc2   secondary-500 #3c472c
     gray-50 #f9fafb  gray-100 #f3f4f6  gray-300 #d1d5db  gray-400 #9ca3af
     gray-500 #6b7280  gray-600 #4b5563  gray-700 #374151
     gray-800 #1f2937  gray-900 #111827

   Structure:
     1. Token overrides      (@layer tokens)
     2. Element defaults     (@layer theme)  — the Tailwind preflight
                             equivalents plus the original custom rules
                             (.ampm, .poster, smooth scroll, overflow)
     3. Component styles     (@layer components) — semantic classes

   Layers are declared in yg-base.css. Don't redeclare them here.
   ================================================================ */


/* ================================================================
   1. TOKEN OVERRIDES
   ================================================================ */

@layer tokens {
  :root {
    /* --- Brand ------------------------------------------------- */
    --color-primary:        #8ec63f;   /* primary-500 */
    --color-primary-strong: #75a434;   /* primary-600 */
    --color-primary-deep:   #5e832a;   /* primary-700 */
    --color-primary-soft:   #dcedc2;   /* primary-100 */
    --color-secondary:      #3c472c;   /* secondary-500 */

    /* --- Ink / grays ------------------------------------------- */
    --color-ink:        #111827;       /* gray-900 */
    --color-ink-soft:   #1f2937;       /* gray-800 */
    --color-ink-mute:   #374151;       /* gray-700 */
    --color-ink-dim:    #4b5563;       /* gray-600 */
    --color-text:       #6b7280;       /* gray-500 — body text */
    --color-text-faint: #9ca3af;       /* gray-400 */
    --color-text-ghost: #d1d5db;       /* gray-300 */
    --color-mist:       #f9fafb;       /* gray-50 */
    --color-mist-deep:  #f3f4f6;       /* gray-100 */
    --color-line:       #e5e7eb;       /* default Tailwind border color */

    /* --- Typography -------------------------------------------- */
    --font-display: "Special Elite", sans-serif;  /* html + h1-h6 */
    --font-body:    "Nixie One", sans-serif;      /* body */

    /* --- Shadows (Tailwind shadow-xl / shadow-2xl) -------------- */
    --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* --- Motion (Tailwind ease-out curve) ----------------------- */
    --ease-out-cubic: cubic-bezier(0, 0, 0.2, 1);
  }
}


/* ================================================================
   2. ELEMENT DEFAULTS — preflight equivalents + original custom rules
   ================================================================ */

@layer theme {

  /* Tailwind preflight box model + default border color */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--color-line);
  }

  html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    font-family: var(--font-display);
    scroll-behavior: smooth;          /* original inline style block */
    overflow-x: hidden;
  }

  body {
    margin: 0;
    line-height: inherit;
    font-family: var(--font-body);    /* was .font-base-font on <body> */
    color: var(--color-text);         /* was text-gray-500 on <body> */
    overflow-x: hidden;
    min-height: 100vh;
    /* yg-base sets antialiased / optimizeLegibility; the original
       (plain Tailwind preflight) does not — reset to browser default. */
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: auto;
  }

  html,
  body {
    min-height: 100vh;
  }

  /* Tailwind preflight resets, the original relied on */
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
  }

  p {
    margin: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  /* The original's custom rule: all headings render Special Elite */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  /* Tailwind preflight: replaced elements are middle-aligned. Without this
     the inline-block poster img picks up a 6px baseline descender gap. */
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
  }

  /* Original custom classes (assets/css/style.css + tailwind_theme) */
  .ampm {
    position: relative;
    top: 0;
  }

  .poster {
    z-index: 0;
  }

  .poster::before {
    background-image: url(/assets/img/IMG_1535.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
  }

  /* yg-base forces a custom focus ring; the original used the browser
     default. Revert to the user-agent focus indicator. */
  :focus-visible {
    outline: revert;
    outline-offset: revert;
    border-radius: revert;
  }

}


/* ================================================================
   3. COMPONENT STYLES — semantic classes, one per original pattern
   ================================================================ */

@layer components {

  /* --- Shell (Tailwind .container + .mx-auto + .relative) ----- */

  .shell {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  @media (min-width: 640px)   { .shell { max-width: 640px; } }
  @media (min-width: 768px)   { .shell { max-width: 768px; } }
  @media (min-width: 1024px)  { .shell { max-width: 1024px; } }
  @media (min-width: 1280px)  { .shell { max-width: 1280px; } }
  @media (min-width: 1536px)  { .shell { max-width: 1536px; } }


  /* --- Hero ---------------------------------------------------- */

  .hero {
    position: relative;
    z-index: 0;
    background-color: var(--color-secondary);
    color: var(--color-text-ghost);
  }

  .hero::before {
    background-image: url(/assets/img/IMG_1535.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
  }

  /* was: absolute bg-gradient-to-bl from-gray-700 inset-0 opacity-50 to-gray-800 */
  .hero-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: linear-gradient(to bottom left, var(--color-ink-mute), var(--color-ink-soft));
  }

  /* was: container mx-auto px-4 py-60 relative text-center */
  .hero-shell {
    padding: 15rem 1rem;
    text-align: center;
  }

  /* was: -mx-4 flex flex-wrap items-center justify-center space-y-6 lg:space-y-0 */
  .hero-row {
    margin-left: -1rem;
    margin-right: -1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .hero-row > * + * {
    margin-top: 1.5rem;
  }

  /* was: flex flex-col items-center justify-center px-4 w-full md:w-9/12 xl:w-6/12 2xl:w-6/12 */
  .hero-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
  }

  /* was: mb-1 text-2xl text-white */
  .hero-tagline {
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
    line-height: 2rem;
    color: #fff;
  }

  /* was: max-w-sm w-full */
  .hero-logo {
    max-width: 24rem;
    width: 100%;
  }

  /* was: font-bold mb-6 text-3xl text-white md:leading-tight lg:leading-tight lg:text-4xl */
  .hero-heading {
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    color: #fff;
  }

  /* was: flex-wrap gap-2 inline-flex items-center justify-center py-1 */
  .hero-cta-row {
    flex-wrap: wrap;
    gap: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0;
  }

  /* was: bg-primary-500 border border-primary-500 inline-block px-6 py-2 text-white */
  .hero-btn-static,
  .hero-btn-link {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    display: inline-block;
    padding: 0.5rem 1.5rem;
    color: #fff;
  }

  /* was: + hover:bg-primary-600 */
  .hero-btn-link:hover {
    background-color: var(--color-primary-strong);
  }

  /* was: flex gap-2 py-4 text-gray-50 */
  .hero-social {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 0;
    color: var(--color-mist);
  }

  /* was: h-10 w-10 hover:shadow-xl */
  .hero-social-icon {
    height: 2.5rem;
    width: 2.5rem;
  }

  .hero-social-icon:hover {
    box-shadow: var(--shadow-xl);
  }

  @media (min-width: 768px) {

    .hero-col {
      width: 75%;
    }

    .hero-heading {
      line-height: 1.25;
    }
  }

  @media (min-width: 1024px) {

    .hero-heading {
      font-size: 2.25rem;
      line-height: 1.25;
    }

    .hero-row > * + * {
      margin-top: 0;
    }
  }

  @media (min-width: 1280px) {

    .hero-col {
      width: 50%;
    }
  }


  /* --- Save-the-date poster band ------------------------------- */

  /* was: bg-secondary-500 poster pb-20 text-center (no .relative —
     kept identical, ::before resolves the same way as the original) */
  .poster-section {
    z-index: 0;
    background-color: var(--color-secondary);
    padding-bottom: 5rem;
    text-align: center;
  }

  .poster-section::before {
    background-image: url(/assets/img/IMG_1535.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
  }

  /* was: container mx-auto px-4 relative */
  .poster-shell {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* was: inline-block max-w-2xl w-full shadow-2xl */
  .poster-img {
    display: inline-block;
    max-width: 42rem;
    width: 100%;
    box-shadow: var(--shadow-2xl);
  }


  /* --- Nav ------------------------------------------------------ */

  /* was: bg-white shadow-xl sticky top-0 z-50 */
  .site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #fff;
    box-shadow: var(--shadow-xl);
  }

  /* was: flex flex-wrap items-center px-4 */
  .nav-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* was: font-bold hover:text-opacity-75 inline-flex items-center leading-none
          mr-4 space-x-1 text-primary-500 text-xl uppercase */
  .nav-logo {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin-right: 1rem;
    column-gap: 0.25rem;
    color: var(--color-primary);
    font-size: 1.25rem;
    text-transform: uppercase;
  }

  /* was: hover:text-opacity-75 against text-primary-500 */
  .nav-logo:hover {
    color: rgba(142, 198, 63, 0.75);
  }

  /* was: w-28 */
  .nav-logo-img {
    width: 7rem;
  }

  /* was: flex flex-1 space-y-2 w-full lg:items-center lg:space-x-4 lg:space-y-0 lg:w-auto */
  .nav-menu {
    display: flex;
    flex: 1 1 0%;
    width: 100%;
  }

  .nav-menu > * + * {
    margin-top: 0.5rem;
  }

  /* was: content-center flex-col hidden items-center justify-center
          justify-items-center justify-self-center mx-auto place-content-center
          place-items-center lg:flex lg:flex-row */
  .nav-links {
    display: none;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* was: hover:text-gray-400 py-2 text-center lg:p-4 */
  .nav-link {
    padding: 0.5rem 0;
    text-align: center;
  }

  .nav-link:hover {
    color: var(--color-text-faint);
  }

  /* was: w-full flex items-center justify-end gap-2 */
  .nav-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  /* was: w-3/4 */
  .nav-spacer {
    width: 75%;
  }

  /* was: border border-primary-500 flex font-bold h-full hover:bg-primary-500
          hover:duration-300 hover:ease-out hover:shadow-xl hover:text-white
          hover:transition-all items-center justify-center py-2 text-center
          text-primary-500 w-full ml-auto */
  .nav-donate {
    border: 1px solid var(--color-primary);
    display: flex;
    font-weight: 700;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    text-align: center;
    color: var(--color-primary);
    width: 100%;
    margin-left: auto;
  }

  /* Tailwind applies transition-* only on :hover here — the hover-in
     animates, the hover-out snaps. Replicated exactly. */
  .nav-donate:hover {
    background-color: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-xl);
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: var(--ease-out-cubic);
  }

  .nav-button {
    font-family: inherit;
    font-size: 100%;
  }

  @media (min-width: 1024px) {

    .nav-menu {
      width: auto;
      align-items: center;
    }

    .nav-menu > * + * {
      margin-top: 0;
      margin-left: 1rem;
    }

    .nav-links {
      display: flex;
      flex-direction: row;
    }

    .nav-link {
      padding: 1rem;
    }
  }


  /* --- The Dirt -------------------------------------------------- */

  /* was: bg-gray-50 px-4 py-12 text-gray-500 */
  .dirt {
    background-color: var(--color-mist);
    padding: 3rem 1rem;
    color: var(--color-text);
  }

  /* was: bg-white container mx-auto px-4 relative */
  .dirt-shell {
    background-color: #fff;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* was: -mx-4 bg-white flex flex-wrap items-start justify-center shadow-xl lg:items-center */
  .dirt-card {
    margin-left: -1rem;
    margin-right: -1rem;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    box-shadow: var(--shadow-xl);
  }

  /* was: p-4 w-full lg:w-4/12 shadow-xl */
  .dirt-img {
    padding: 1rem;
    width: 100%;
    box-shadow: var(--shadow-xl);
  }

  /* was: flex flex-col items-center justify-center mx-auto p-4 text-center w-full lg:w-7/12 */
  .dirt-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    text-align: center;
    width: 100%;
  }

  /* was: capitalize font-bold leading-normal mb-2 mt-8 text-4xl sm:leading-relaxed sm:mt-0
     (leading-normal wins over text-4xl's line-height in the compiled sheet) */
  .dirt-title {
    text-transform: capitalize;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
    font-size: 2.25rem;
  }

  /* was: leading-normal mb-6 text-xl sm:leading-relaxed sm:w-full */
  .dirt-text {
    line-height: 1.5;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
  }

  @media (min-width: 640px) {

    .dirt-title {
      line-height: 1.625;
      margin-top: 0;
    }

    .dirt-text {
      line-height: 1.625;
      width: 100%;
    }
  }

  @media (min-width: 1024px) {

    .dirt-card {
      align-items: center;
    }

    .dirt-img {
      width: 33.333333%;
    }

    .dirt-body {
      width: 58.333333%;
    }
  }


  /* --- Bands ----------------------------------------------------- */

  /* was: bg-gray-900 bg-opacity-90 font-light py-24 text-center text-gray-500 */
  .bands {
    background-color: rgba(17, 24, 39, 0.9);
    font-weight: 300;
    padding: 6rem 0;
    text-align: center;
    color: var(--color-text);
  }

  .bands-shell {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* was: font-medium mb-2 text-xl */
  .bands-kicker {
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  /* was: capitalize font-bold mb-6 text-4xl text-primary-500 xl:text-5xl */
  .section-title {
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 2.25rem;
    line-height: 2.5rem;
    color: var(--color-primary);
  }

  /* sponsors variant: mb-4 instead of mb-6 */
  .section-title--sponsors {
    margin-bottom: 1rem;
  }

  /* was: flex flex-wrap -mx-4 justify-center */
  .bands-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem;
    justify-content: center;
  }

  /* was: p-4 w-full md:w-1/2 */
  .band-cell {
    padding: 1rem;
    width: 100%;
  }

  .band-frame {
    position: relative;
  }

  /* was: w-full h-80 object-cover */
  .band-photo {
    width: 100%;
    height: 20rem;
    object-fit: cover;
  }

  /* was: absolute bg-white bottom-0 inset-x-0 mb-4 mx-4 p-5
     (group-hover:bg-primary-100 in the original never fired — no .group
     ancestor exists — so it is not carried over) */
  .band-label {
    position: absolute;
    bottom: 0;
    background-color: #fff;
    left: 0;
    right: 0;
    margin-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1.25rem;
  }

  /* was: font-bold mb-1 text-2xl text-gray-900 */
  .band-name {
    font-weight: 700;
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--color-ink);
  }

  /* was: p-4 text-xl w-full */
  .bands-note {
    padding: 1rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    width: 100%;
  }

  @media (min-width: 768px) {

    .band-cell {
      width: 50%;
    }
  }

  @media (min-width: 1280px) {

    .section-title {
      font-size: 3rem;
      line-height: 1;
    }
  }


  /* --- Schedule --------------------------------------------------- */

  /* was: py-24 text-gray-500 */
  .schedule {
    padding: 6rem 0;
    color: var(--color-text);
  }

  /* was: container mx-auto px-4 relative text-center */
  .schedule-shell {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
  }

  /* was: capitalize font-bold mb-2 text-gray-600 text-xl xl:text-3xl */
  .schedule-line {
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-ink-dim);
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  /* was: hidden mb-2 ... */
  .schedule-line--hidden {
    display: none;
  }

  /* was: text-lg */
  .schedule-kids {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  /* was: grid-cols-1 items-center justify-center mt-8 pt-6 sm:grid text-2xl gap-4
     (block at mobile, grid from sm up — exactly like the original) */
  .schedule-day {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    gap: 1rem;
  }

  /* was: font-extrabold */
  .schedule-hours {
    font-weight: 800;
  }

  /* was: mt-4 */
  .schedule-featured {
    margin-top: 1rem;
  }

  /* was: mt-4 text-xl */
  .schedule-settimes {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  /* was: font-bold mb-2 text-primary-600 text-xl xl:text-2xl */
  .schedule-tickets {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-primary-strong);
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  @media (min-width: 640px) {

    .schedule-day {
      display: grid;
    }
  }

  @media (min-width: 1280px) {

    .schedule-line {
      font-size: 1.875rem;
      line-height: 2.25rem;
    }

    .schedule-tickets {
      font-size: 1.5rem;
      line-height: 2rem;
    }
  }


  /* --- Mission ----------------------------------------------------- */

  /* was: bg-gray-900 relative text-white */
  .mission {
    background-color: var(--color-ink);
    position: relative;
    color: #fff;
  }

  /* was: absolute h-full inset-0 object-center object-cover w-full */
  .mission-bg {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    object-position: center;
    object-fit: cover;
    width: 100%;
  }

  /* was: absolute bg-opacity-75 bg-primary-600 inset-0 */
  .mission-scrim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(117, 164, 52, 0.75);
  }

  /* was: container mx-auto px-4 py-24 relative */
  .mission-shell {
    padding: 6rem 1rem;
  }

  /* was: flex flex-wrap -mx-4 */
  .mission-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem;
  }

  /* was: px-4 text-center w-full sm:text-left md:w-10/12 lg:w-6/12 */
  .mission-col {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
    width: 100%;
  }

  /* was: font-medium mb-2 text-gray-50 uppercase */
  .mission-eyebrow {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--color-mist);
    text-transform: uppercase;
  }

  /* was: font-extrabold mb-4 text-6xl text-white */
  .mission-title {
    font-weight: 800;
    margin-bottom: 1rem;
    font-size: 3.75rem;
    line-height: 1;
    color: #fff;
  }

  /* was: font-light mb-6 text-xl */
  .mission-text {
    font-weight: 300;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  @media (min-width: 640px) {

    .mission-col {
      text-align: left;
    }
  }

  @media (min-width: 768px) {

    .mission-col {
      width: 83.333333%;
    }
  }

  @media (min-width: 1024px) {

    .mission-col {
      width: 50%;
    }
  }


  /* --- How You Can Help --------------------------------------------- */

  /* was: bg-gray-50 py-16 text-center text-gray-800 */
  .help {
    background-color: var(--color-mist);
    padding: 4rem 0;
    text-align: center;
    color: var(--color-ink-soft);
  }

  /* was: bg-white container mx-auto p-8 relative shadow-xl */
  .help-shell {
    background-color: #fff;
    padding: 2rem;
    box-shadow: var(--shadow-xl);
  }

  /* was: capitalize font-bold mb-6 text-3xl text-primary-600 */
  .help-title {
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    color: var(--color-primary-strong);
  }

  /* was: grid-cols-1 md:gap-6 md:grid md:grid-cols-3 */
  .help-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  /* was: capitalize font-bold my-4 text-2xl text-center text-gray-800 xl:text-5xl */
  .help-heading {
    text-transform: capitalize;
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--color-ink-soft);
  }

  /* was: text-justify text-xl */
  .help-text {
    text-align: justify;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  /* was: gap-2 grid grid-cols-3 grid-rows-1 py-8 w-full */
  .help-actions {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(1, minmax(0, 1fr));
    padding: 2rem 0;
    width: 100%;
  }

  /* was: bg-primary-500 border border-primary-500 inline-block py-2 text-center text-white w-full */
  .help-btn-static {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    display: inline-block;
    padding: 0.5rem 0;
    text-align: center;
    color: #fff;
    width: 100%;
  }

  /* was: bg-primary-500 border border-primary-500 hover:bg-primary-600 hover:duration-300
          hover:ease-out hover:shadow-xl hover:transition-all inline-block py-2 text-white w-full */
  .help-btn-solid {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    display: inline-block;
    padding: 0.5rem 0;
    color: #fff;
    width: 100%;
  }

  .help-btn-solid:hover {
    background-color: var(--color-primary-strong);
    box-shadow: var(--shadow-xl);
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: var(--ease-out-cubic);
  }

  /* was: border border-primary-500 hover:bg-primary-500 hover:duration-300 hover:ease-out
          hover:shadow-xl hover:text-white hover:transition-all inline-block py-2
          text-primary-500 w-full */
  .help-btn-outline {
    border: 1px solid var(--color-primary);
    display: inline-block;
    padding: 0.5rem 0;
    color: var(--color-primary);
    width: 100%;
  }

  .help-btn-outline:hover {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-xl);
    color: #fff;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: var(--ease-out-cubic);
  }

  @media (min-width: 768px) {

    .help-grid {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 1280px) {

    .help-heading {
      font-size: 3rem;
      line-height: 1;
    }
  }


  /* --- Send Us A Message --------------------------------------------- */

  /* was: bg-gray-100 py-24 text-center text-gray-500 */
  .contact {
    background-color: var(--color-mist-deep);
    padding: 6rem 0;
    text-align: center;
    color: var(--color-text);
  }

  /* was: flex flex-wrap -mx-4 */
  .contact-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem;
  }

  /* was: container mx-auto px-4 relative */
  .contact-shell {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* was: mx-auto p-4 w-full lg:w-8/12 */
  .contact-col {
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    width: 100%;
  }

  /* was: font-bold leading-tight mb-2 text-3xl text-primary-600 uppercase */
  .contact-title {
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.5rem;
    font-size: 1.875rem;
    color: var(--color-primary-strong);
    text-transform: uppercase;
  }

  @media (min-width: 1024px) {

    .contact-col {
      width: 66.666667%;
    }
  }


  /* --- Sponsors -------------------------------------------------------- */

  /* was: bg-gray-100 py-16 border-t-2 text-gray-500
     (border-t-2 keeps the preflight default border color #e5e7eb) */
  .sponsors {
    background-color: var(--color-mist-deep);
    padding: 4rem 0;
    border-top: 2px solid var(--color-line);
    color: var(--color-text);
  }

  .sponsors-shell {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
  }

  /* was: font-medium mb-2 text-xl */
  .sponsors-kicker {
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  /* was: py-8 */
  .sponsor-group {
    padding: 2rem 0;
  }

  /* was: capitalize font-bold mb-4 text-3xl text-primary-500 xl:text-3xl */
  .sponsor-group-title {
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    color: var(--color-primary);
  }

  /* was: gap-8 grid grid-cols-2 items-center justify-center justify-items-center w-full sm:grid-cols-4/5 */
  .sponsor-grid {
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
    justify-items: center;
    width: 100%;
  }

  /* was: bg-white flex h-48 items-center justify-center justify-items-center p-4 shadow-xl w-full max-w-48 */
  .sponsor-card {
    background-color: #fff;
    display: flex;
    height: 12rem;
    align-items: center;
    justify-content: center;
    justify-items: center;
    padding: 1rem;
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 12rem;
  }

  /* was: object-contain */
  .sponsor-img {
    object-fit: contain;
  }

  /* was: flex h-full items-center justify-center justify-items-center p-4 w-full */
  .food-cell {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    justify-items: center;
    padding: 1rem;
    width: 100%;
  }

  /* was: bg-white shadow-xl border-8 border-white */
  .food-card {
    background-color: #fff;
    box-shadow: var(--shadow-xl);
    border: 8px solid #fff;
  }

  @media (min-width: 640px) {

    .sponsor-grid--bar {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sponsor-grid--other {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }


  /* --- Footer ----------------------------------------------------------- */

  /* was: footer bg-primary-600 text-white */
  .site-footer {
    background-color: var(--color-primary-strong);
    color: #fff;
  }

  /* was: flex gap-2 items-center justify-center pt-2 text-gray-50 */
  .footer-social {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    padding-top: 0.5rem;
    color: var(--color-mist);
  }

  /* was: h-8 w-8 hover:shadow-xl */
  .footer-social-icon {
    height: 2rem;
    width: 2rem;
  }

  .footer-social-icon:hover {
    box-shadow: var(--shadow-xl);
  }

  .footer-copy-row {
    text-align: center;
  }

  /* was: container mx-auto px-4 relative */
  .footer-shell {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* was: py-4 text-base */
  .footer-copy {
    padding: 1rem 0;
    font-size: 1rem;
    line-height: 1.5rem;
  }


  /* --- Tickets805 iframe (component, not on the page yet) --------------- */

  .tickets-iframe {
    background-color: #fff;
    border: 2px solid #ccc;
  }


  /* --- Button component (ui/button, not used on the page yet) ------------ */

  /* was: bg-primary-500 border border-primary-500 hover:bg-primary-600 inline-block px-6 py-2 text-white */
  .btn-hero {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    display: inline-block;
    padding: 0.5rem 1.5rem;
    color: #fff;
    font-family: inherit;
    font-size: 100%;
  }

  .btn-hero:hover {
    background-color: var(--color-primary-strong);
  }

}