@charset "UTF-8";
/* CSS Document */
@charset "UTF-8";
/* CSS Document */

:root {
  --primary: #862633;
  --secondary: #001A72;
  --silver: #C0C0C0;
  --bg: #0c0f16;
  --card: #131827;
  --text: #e8eaf1;
  --muted: #aeb6d3;
}

* {
  /*box-sizing: border-box;*/
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
	background: #000000;
  /*background:
    radial-gradient(1200px 500px at 10% -10%, rgba(0, 26, 114, .35), transparent 60%),
    radial-gradient(1200px 500px at 110% 10%, rgba(134, 38, 51, .35), transparent 60%),
    linear-gradient(180deg, #0a0d14, #0b0d12 60%, #0a0d14);*/
}

img {
  max-width: 100%;
  display: block;
}

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

.container {
  width: min(1150px, 92vw);
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: -999px;
  background: var(--secondary);
  color: #fff;
  padding: .5rem .75rem;
  border-radius: 8px;
}

.skip-link:focus {
  left: .75rem;
  top: .75rem;
  z-index: 999;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

.brand-mark {
  height: 60px;
}

.brand-name {
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(192, 192, 192, .25);
  background: #0f1320;
  color: var(--text);
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  margin: 5px auto;
}

.site-nav {
  display: block;
}

.nav-list {
  display: flex;
  gap: .6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list a {
  padding: .45rem .7rem;
  border: 1px solid transparent;
}

.nav-list a:hover,
.nav-list a.is-active {
  border-color: rgba(192, 192, 192, .35);
}

/* Hero (full-screen) */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
}

@media (max-width: 800px) {
	.hero {
		padding-top: 90px;
	}
}

.hero-media {
  position: absolute;
  inset: 0;
  background-image: image-set(
    url('../images/blueback02.jpg') 1x,
    url('../images/blueback02@2x.jpg') 2x
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(1.05) contrast(1.05);
}

/*.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
} */

.hero-content {
  position: relative;
  z-index: 1;
  padding: 5rem 0 4rem;
}

.hero h1 {
  margin: 0 0 .5rem;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 800;
}

.hero p {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}

/* Layer order */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; z-index: 0; }
.hero-paws   { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-content{ position: relative; z-index: 2; }

.paw-tracks { position: absolute; inset: 0; }

/* Bigger paw prints + slow fade after landing */
.paw-print {
  position: absolute;
  width: clamp(36px, 5.5vw, 88px);   /* bigger! */
  height: auto;
  opacity: 0;
  transform: translateY(10px) scale(.98) rotate(var(--rot, 0deg));
  transition:
    opacity var(--fade, 8s) ease-out,   /* long fade; JS sets --fade per print */
    transform .45s ease;
  /*filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));*/
	mix-blend-mode: hard-light;
}

.paw-print.show {
  opacity: .36;                        /* visible when it “lands” */
  transform: translateY(0) scale(1) rotate(var(--rot, 0deg));
}

/* Start the long fade */
.paw-print.fade { opacity: 0; }

/* gait tilt */
.paw-print.left  { --rot: -10deg; }
.paw-print.right { --rot:  10deg; }

/* Mobile tweaks */
@media (max-width: 560px) {
  .paw-print { width: clamp(28px, 12vw, 64px); }
  .paw-print.show { opacity: .26; }
}




.cta {
  display: inline-flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* === Countdown (hero) === */
.countdown {
  --cd-border: rgba(192, 192, 192, .25);
  --cd-bg: #0f1320;
  --cd-accent: var(--primary);

  margin: 1rem auto 0;
  display: grid;
  gap: .6rem;
  justify-items: center;
  text-align: center;
}

.cd-label {
  display: inline-block;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--primary);
}

.cd-units {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: stretch;
  gap: .6rem;
	padding-bottom: 20px;
}

.cd-range {
  display: flex;
  align-items: center;
  padding: .6rem 4rem;
  background: var(--cd-bg);
  color: var(--primary);
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap; /* keep it on one line */
	background: #862633;
}

.cd-box {
  min-width: 84px;
  padding: .6rem .75rem;
  background: var(--cd-bg);
}

.cd-box span {
  display: block;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 800;
  font-size: clamp(1.25rem, 3.2vw, 1.8rem);
  line-height: 1.1;
  color: var(--text);
}

.cd-box small {
  display: block;
  margin-top: .15rem;
  font-size: .75rem;
  letter-spacing: .03em;
  color: var(--muted);
}

/* compact on mobile */
@media (max-width: 560px) {
  .cd-units {
    gap: .4rem;
  }
  .cd-box {
    min-width: 68px;
    padding: .5rem .6rem;
  }
}

/* utility */
.hidden {
  display: none !important;
}


/* Sections */
.section {
  /*padding: clamp(2.5rem, 5vw, 4rem) 0;*/
  scroll-margin-top: 90px;
	padding: 10rem 10% 10rem 10%;
}

.section-title {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  /*color: var(--primary); /* #862633 */
}

.titleid1 {
	color: #862633;
}

.titleid2 {
	color: #0f1320;
}

.titleid3 {
	color: #002f70;
}

.titleid4 {
	color: #dedede;
}

.titleid5 {
	color: #111;
}

.titleid6 {
	color: #84754e;
}

.section-lead {
  margin: 0 0 1rem;
  color: var(--muted);
}

/* Cards & grids */
.grid {
  display: grid;
  gap: 1rem;
	align-items: center;
}

.grid.two {
  grid-template-columns: repeat(2, 1fr);
}

.grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.grid.four {
  grid-template-columns: repeat(4, 1fr);
}

.cards-3 {
  grid-template-columns: repeat(3, 1fr);
}

.cards-4 {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  background: var(--card);
  overflow: clip;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card::after {
  --corner: 22px;                /* tweak size here */
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--corner);
  height: var(--corner);
  background: var(--primary, #862633);  /* “red” (school maroon) */
  /* draw a right-angle triangle inside the corner */
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  opacity: .95;
  pointer-events: none;          /* purely decorative */
}

/* (optional) subtle grow on hover */
.card:hover::after {
  transform: scale(1.06);
  transition: transform .18s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  border-color: rgba(192, 192, 192, .25);
  border: 1px solid rgba(192, 192, 192, .15);
}

.card-media {
  aspect-ratio: 16 / 9;
  background: center / cover no-repeat;
}

.card-body {
  padding: 1rem;
}

.card-body h3 {
  margin: 0 0 .35rem;
}

.placeholder {
  border: 1px dashed rgba(192, 192, 192, .25);
  color: var(--muted);
  display: grid;
  place-items: center;
  text-align: center;
}

/*.info-card {
  background: #0f1320;
  border: 1px solid rgba(192, 192, 192, .15);
  padding: 1rem;
}*/

/* Corner triangle for info cards */
.info-card {
  padding: 0 1rem 1rem 1rem;
  background: #0f1320;
  position: relative;            /* ensure the corner positions correctly */
  overflow: hidden;              /* keeps the triangle inside rounded corners */
}

.info-card::after {
  --corner: 22px;                /* tweak size here */
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--corner);
  height: var(--corner);
  background: var(--primary, #862633);  /* “red” (school maroon) */
  /* draw a right-angle triangle inside the corner */
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  opacity: .95;
  pointer-events: none;          /* purely decorative */
}

/* (optional) subtle grow on hover */
.info-card:hover::after {
  transform: scale(1.06);
  transition: transform .18s ease;
}


/* Artist card: image-first, gradient name bar, red reveal on hover */
.artist-card {
  padding: 0;                               /* remove default .card padding */
  background: transparent;                  /* let the image show edge-to-edge */
  border: 0;
  /*border-radius: 16px;*/
  overflow: clip;                           /* rounds corners for inner layers */
  position: relative;
}

/* Image layer */
.artist-media {
  position: relative;
  aspect-ratio: 16 / 9;                     /* adjust if you prefer 4/5 portraits */
  background-size: cover;
  background-position: center;
}

/* Blue gradient from bottom → transparent behind the name */
/* Blue gradient only on the bottom 10–15% of the image */
:root { --artist-grad-h: 30%; } /* adjust to 10%–15% as you like */

.artist-media::after {
  content: "";
  position: absolute; inset: 0;
  /* keep the same blue, but use a sized background so it only covers the bottom slice */
  background-image: linear-gradient(
    to top,
    rgba(15, 19, 32, 0.90) 0%,
    rgba(15, 19, 32, 0.70) 40%,
    rgba(15, 19, 32, 0.00) 100%
  );
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% var(--artist-grad-h); /* ← height of the gradient */
  pointer-events: none;
  z-index: 0;
  transition: opacity .25s ease;
}
@media (max-width: 560px) {
  :root { --artist-grad-h: 16%; } /* e.g., 16–18% on mobile */
}


/* Name over the gradient */
.artist-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .75rem .9rem;
  z-index: 1;
}
.artist-name h3 {
  margin: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Hover panel (maroon/red) */
.artist-hover {
  position: absolute; inset: 0;
  display: grid;
  place-content: center;
  gap: .35rem;
  padding: 1rem;
  text-align: center;
  background: var(--primary);              /* #862633 */
  color: #fff;
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 2;
}

.artist-hover h3 { margin: 0 0 .1rem; font-weight: 800; }
.artist-hover .event-name { margin: 0; opacity: .95; }
.artist-hover .where-when { margin: .1rem 0 .4rem; opacity: .9; }
.artist-hover .actions { display: inline-flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

/* Reveal on hover/focus */
@media (hover: hover) {
  .artist-card:hover .artist-hover { opacity: 1; transform: none; }
  .artist-card:hover .artist-media::after { opacity: 0; } /* fade blue bar when expanded */
}
.artist-card:focus-within .artist-hover,
.artist-card:focus .artist-hover { opacity: 1; transform: none; }
.artist-card:focus-within .artist-media::after,
.artist-card:focus .artist-media::after { opacity: 0; }

/* Optional: make the gradient bar a bit taller on small screens so the name sits clearly */
@media (max-width: 560px) {
  .artist-media::after {
    background:
      linear-gradient(
        to top,
    rgba(15, 19, 32, 0.90) 0%,
    rgba(15, 19, 32, 0.70) 40%,
    rgba(15, 19, 32, 0.00) 100%
      );
  }
}


/* === Artists grid: choose 2 / 3 / 4 columns with a class === */
.artists-grid {
  display: grid;
  gap: 1rem;
  align-items: stretch;
}

/* Pick one of these per grid */
.artists-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.artists-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.artists-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Responsive fallbacks */
@media (max-width: 900px) {
  .artists-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .artists-grid.cols-4,
  .artists-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .artists-grid { grid-template-columns: 1fr; }
}

/* === Square artist cards === */
.artist-card {
  padding: 0;
  background: transparent;
  border: 0;
  /*border-radius: 16px; */
  overflow: clip;
  position: relative;
}

.artist-media {
  position: relative;
  aspect-ratio: 1 / 1;             /* <- forces a perfect square */
  background-size: cover;
  background-position: center;
}

/* Keep your gradient name bar + hover panel styles as you have them */


.bullets {
  padding-left: 1.2rem;
  color: var(--muted);
}

.bullets li {
  margin: .35rem 0;
}

.map-embed .map-ph,
.embed-ph {
  height: 320px;
  border: 1px dashed rgba(192, 192, 192, .25);
  display: grid;
  place-items: center;
  color: var(--muted);
  background: #0f1320;
}

/* Sponsors */
.sponsor-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
}

.sponsor-grid img {
  width: 100%;
  height: 72px;
  object-fit: contain;
  background: #0f1320;
  padding: .75rem;
}

/* Contact */
.contact-form .label {
  display: block;
  margin-bottom: .35rem;
  color: var(--muted);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid rgba(192, 192, 192, .25);
  background: #0f1320;
  color: var(--text);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--secondary);
  outline-offset: 1px;
}

/* Buttons */
/* Replace your existing .btn block with this */
.btn {
  --btn-fill: var(--secondary);
  --btn-border: var(--silver);
  --btn-text: var(--text);
  --btn-text-hover: #fff;

  display: inline-grid;
  place-items: center;
  padding: .65rem 1rem;
  border: 1.5px solid var(--btn-border);
  background-image: linear-gradient(90deg, var(--btn-fill), var(--btn-fill));
  background-repeat: no-repeat;
  background-position: left;
  background-size: 0% 100%;
  color: var(--btn-text);
  font-weight: 700;
  cursor: pointer;
  transition:
    background-size .35s ease,
    color .25s ease,
    border-color .25s ease,
    transform .08s ease;
  will-change: background-size, color, border-color, transform;
}

.btn:hover,
.btn:focus-visible {
  background-size: 100% 100%;
  color: var(--btn-text-hover);
  border-color: var(--btn-fill);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}

/* Variants */
.btn--navy {
  --btn-fill: var(--secondary);
  --btn-border: var(--secondary);
}

.btn--maroon {
  --btn-fill: var(--primary);
  --btn-border: var(--primary);
}

.btn--silver {
  --btn-fill: var(--silver);
  --btn-border: var(--silver);
  --btn-text-hover: #0e1117;
}

.btn--black {
  --btn-fill: var(--silver);
  --btn-border: var(--silver);
  --btn-text-hover: #0e1117;
	background-color: #862633;
}

.btn--black2 {
  --btn-fill: var(--silver);
  --btn-border: var(--primary);
  --btn-text-hover: #0e1117;
	background-color: #862633;
}

.btn--blue {
  --btn-fill: var(--silver);
  --btn-border: var(--silver);
  --btn-text-hover: #0e1117;
	background-color: #002f70;
}

/* Directions */
.btn--wipe-rtl {
  background-position: right;
}

.btn--wipe-ttb {
  background-image: linear-gradient(180deg, var(--btn-fill), var(--btn-fill));
  background-position: top;
  background-size: 100% 0%;
}

.btn--wipe-ttb:hover,
.btn--wipe-ttb:focus-visible {
  background-size: 100% 100%;
}

.btn--wipe-btt {
  background-image: linear-gradient(0deg, var(--btn-fill), var(--btn-fill));
  background-position: bottom;
  background-size: 100% 0%;
}

.btn--wipe-btt:hover,
.btn--wipe-btt:focus-visible {
  background-size: 100% 100%;
}

/* Footer */
.site-foot {
  padding: 0.5rem 0;
  color: #BCBCBC;
  /*color: var(--muted);*/
  background: #862633;
}

.special1 {
  color: #862633;
  text-transform: uppercase;
  font-weight: bold;
  display: inline;
}

.special2 {
  color: #862633;
  text-transform: uppercase;
  font-weight: bold;
  display: inline;
}

/* Hero logo (responsive SVG) */
.hero-logo {
  display: block;
  max-width: 50%;
  height: auto;
  margin: 0 auto 1rem;
  pointer-events: none;
  user-select: none;
}

/* Tighten spacing on very small screens */
@media (max-width: 560px) {
  .hero-logo {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0 auto 1rem;
  }
}

/* Give the title a little breathing room after the logo */
.hero h1 {
  margin-top: .25rem; /* add to your existing rule */
}


/* === Reveal on scroll: fade-up === */
.reveal-up {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .6s ease,
    transform .6s ease;
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}




/* Responsive */
@media (max-width: 1024px) {
	.cards-3 {
    	grid-template-columns: repeat(2, 1fr);
	}
	.cards-4 {
    	grid-template-columns: repeat(2, 1fr);
  	}
  .grid.three {
    	grid-template-columns: repeat(2, 1fr);
  	}
	.grid.four {
    	grid-template-columns: repeat(2, 1fr);
  	}

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


	
 

@media (max-width: 560px) {
  .cards-3,
  .grid.three,
  .sponsor-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .cards-4,
  .grid.four,
  .sponsor-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .hero-media { background-position: center top; }
}

/* Center content in every countdown item and equalize heights */
.cd-units {
  display: grid;
  grid-auto-flow: column;
  align-items: stretch;            /* makes all items the height of the tallest (cd-range) */
  gap: .6rem;
}

/* Every item (range + each box) fills the row height and centers its content */
.cd-units > * {
  display: grid;
  place-items: center;             /* horizontal + vertical centering */
}

/* Tidy up heading inside the date range */
.cd-range > * { margin: 0; }

/* Optional: keep cd-box interiors nicely centered in a column layout */
.cd-box {
  padding: .6rem .75rem;           /* keep your padding */
  text-align: center;
}

/* --- Mobile: stack the date range ABOVE the countdown boxes --- */
@media (max-width: 560px) {
  .cd-units {
    grid-auto-flow: row;                               /* stack rows on mobile */
    grid-template-columns: repeat(4, minmax(68px, 1fr));/* 4 boxes per row */
    justify-items: stretch;
    gap: .4rem;
  }
  .cd-range {
    grid-column: 1 / -1;       /* span full width above the boxes */
    justify-self: center;      /* center the range block itself */
  }
  .cd-box { min-height: 72px; } /* nice consistent box height on small screens */
}


/* Hero-only: rock-solid wipe fill (text always visible) */
.hero .cta .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;          /* keeps ::before behind content only */
  background: transparent;     /* ignore the background-size wipe here */
}

.hero .cta .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn-fill); /* set by btn--maroon / btn--silver */
  transform: translateX(-100%);
  transition: transform .35s ease;
  z-index: -1;                 /* behind the label */
}

.hero .cta .btn:hover,
.hero .cta .btn:focus-visible {
  color: var(--btn-text-hover);
  border-color: var(--btn-fill);
}

.hero .cta .btn:hover::before,
.hero .cta .btn:focus-visible::before {
  transform: translateX(0);    /* wipe in */
}

/* Mobile: no hover → show wipe on press */
@media (hover: none) {
  .hero .cta .btn:active::before { transform: translateX(0); }
}

/* Primary subtitle – forces next content onto a new line */
.subtitle {
  display: block;                 /* <- this pushes following content to the next line */
  margin-top: .2rem;
  font-size: clamp(.9rem, 1.3vw, 1.05rem);
  font-weight: 600;
  color: var(--muted, #aeb6d3);
  letter-spacing: 4px;
	text-transform: uppercase;
}

.ticket-title {
  display: block;                 /* <- this pushes following content to the next line */
  margin-top: .2rem;
  font-size: clamp(1.9rem, 2.3vw, 2.05rem);
  font-weight: 900;
  letter-spacing: .2px;
}

/* Brand-friendly tints (navy/maroon) and images */
.section--artists {
  /*--bg-img: url("../images/redback01.jpg");*/
  /*--bg-tint: rgba(0,26,114,.28);*/       /* navy */
  --bg-pos: center 30%;
}

.section--schedule {
  /*--bg-img: url("../images/sectionback01.jpg");*/
	background-image: url("../images/sectionback02.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top right;
  /*--bg-tint: rgba(134,38,51,.25);*/      /* maroon */
}

@media (max-width: 800px) {
  .section--schedule { 
	  background-image: url("../images/sectionback02_m.jpg");
	}
}

.section--tickets {
  /*--bg-img: url("images/bg-tickets.jpg");*/
	background-image: url("../images/sectionticket01.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top right;
  /*--bg-tint: rgba(0,0,0,.35);*/
}

.section--parade {
  /*--bg-img: url("../images/sectionmap01.jpg");*/
	background-image: url("../images/sectionmap01.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top right;
  /*--bg-tint: rgba(0,26,114,.25);*/
}

.section--parade .grid.two {
  display: grid;                                   /* ensure grid */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;                             /* row matches tallest col */
}

.section--parade .grid.two > * {
  align-self: center;                               /* center each col vertically */
}

/* When it stacks on mobile, go back to normal top alignment */
@media (max-width: 800px) {
  .section--parade .grid.two {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .section--parade .grid.two > * {
    align-self: auto;
  }
}

/* ===== Parade video embed ===== */
.video-embed { max-width: 680px; width: 100%; }

.video-16x9 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;              /* responsive */
  /*border-radius: 14px;*/
  overflow: hidden;
  background: #0f1320;
  border: 1px dashed rgba(192,192,192,.25);
}

/* Unique placeholder: diagonal pattern + play glyph */
.video-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center;
  color: #e8eaf1;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(206,184,136,.06) 0px,
      rgba(206,184,136,.06) 12px,
      rgba(0,0,0,0) 12px,
      rgba(0,0,0,0) 24px
    ),
    radial-gradient(1200px 600px at 80% -10%, rgba(0,26,114,.26), transparent 60%),
    radial-gradient(1200px 600px at 10% 110%, rgba(134,38,51,.22), transparent 60%),
    #0f1320;
}

/* Play button */
.video-ph::before {
  content: "";
  width: 84px; height: 84px;
  /*border-radius: 50%;*/
  background: rgba(14,17,23,.6);
  box-shadow: 0 0 0 1px rgba(192,192,192,.18) inset, 0 8px 22px rgba(0,0,0,.35);
  display: block;
  position: relative;
}
.video-ph::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border-left: 22px solid #fff;       /* triangle */
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  transform: translateX(6px);         /* nudge inside the circle */
}

/* Placeholder labels */
.video-ph-title {
  position: absolute; bottom: 20px; left: 20px;
  font-weight: 800; letter-spacing: .02em;
  background: rgba(0,0,0,.35);
  padding: .25rem .5rem; border-radius: 8px;
}
.video-ph-sub {
  position: absolute; bottom: 20px; right: 20px;
  font-size: .9rem; color: #aeb6d3;
  background: rgba(0,26,114,.35);
  padding: .25rem .5rem; border-radius: 8px;
}

/* When you swap in the iframe, it fills the box */
.video-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}


.section--travel {
  --bg-img: url("images/bg-travel.jpg");
  /*--bg-tint: rgba(0,0,0,.35);*/
}

/* === Travel Guide dropdown (full-width, two columns) =================== */
.section--travel .tg-panel {
  width: 100%;
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height .35s ease, opacity .25s ease;
  will-change: height, opacity;
  position: relative;
  z-index: 0;
}
.section--travel .tg-panel.is-open { opacity: 1; }

.section--travel .tg-inner {
  margin-top: .9rem;
  padding: 1rem;
  background: rgba(15,19,32,.85);
  border: 1px solid rgba(192,192,192,.15);
  backdrop-filter: blur(2px);
}

.section--travel .tg-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.25fr);
  gap: 1rem;
  align-items: stretch;
}

.section--travel .tg-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: 12px;
}

.section--travel .tg-content {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  justify-content: center;
}

.section--travel .tg-title {
  margin: 0 0 .1rem;
  font-weight: 800;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--text);
}
.section--travel .tg-sub { margin: 0 0 .35rem; color: var(--muted); }
.section--travel .tg-desc { margin: 0 0 .5rem; color: var(--text); }

.section--travel .tg-prices {
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
  color: var(--text);
}
.section--travel .tg-prices li { margin: .15rem 0; }
.section--travel .tg-prices span {
  display: inline-block;
  min-width: 5.25rem;
  color: #CEB888;
}

.section--travel .tg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Responsive: stack columns on small screens */
@media (max-width: 800px) {
  .section--travel .tg-grid { grid-template-columns: 1fr; }
  .section--travel .tg-media img { max-height: 280px; }
}

/* Travel Guide: multiple items list */
.section--travel .tg-list {
  display: grid;
  gap: 1rem;
}

.section--travel .tg-item .tg-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.25fr);
  gap: 1rem;
  align-items: stretch;
}

@media (max-width: 800px) {
  .section--travel .tg-item .tg-grid {
    grid-template-columns: 1fr;
  }
}

/* Travel: when the dropdown panel sits inside the grid, make it full-width */
.section--travel .grid > #tg-shared {
  grid-column: 1 / -1;
}

/* Optional small top margin so it doesn’t crowd the card */
.section--travel #tg-shared.is-inline .tg-inner {
  margin-top: .6rem;
}


/* Travel Guide animated lines + stacking */
.section--travel { 
	position: relative; 
}

.section--travel .travel-tracks {
  	position: absolute; inset: 0;
  	z-index: 0; 
	pointer-events: none;
  	opacity: 1;                     /* adjust strength */
}

.section--travel > .container,
.section--travel #tg-shared {
  	position: relative; 
	z-index: 1;   /* content above lines */
}

.section--travel .track {
  	position: absolute; 
	width: 100%; 
	height: 100%;
  	color: rgba(116,0,0,1);     /* dotted line color */
}

.section--travel .dash {
  	fill: none; 
	stroke: currentColor;
  	stroke-width: 4.2; 
	stroke-linecap: round;
  	stroke-dasharray: 6 10;
  	animation: travel-dash 22s linear infinite;
  	opacity: .95;
}

.section--travel .track-a .dash { 
	animation-duration: 6s; 
}

.section--travel .track-b .dash { 
	animation-duration: 20s; 
	animation-direction: reverse; 
	opacity: .50; 
}

.section--travel .track-c .dash { 
	animation-duration: 15s; 
	opacity: .40; 
}

@keyframes travel-dash {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -320; }
}

@media (prefers-reduced-motion: reduce) {
  	.section--travel .dash { 
	  animation: none; 
	}
}


.section--reunions {
  --bg-img: url("images/bg-reunions.jpg");
	background-image: url("../images/sectionreunion01.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top right;
	background-color: #002f70;
  /*--bg-tint: rgba(134,38,51,.22);*/
}

/* === Class Reunions heading ========================================== */
.section--reunions .reunion-heading {
  text-align: left;
  line-height: 1.1;
}

.section--reunions .reunion-kicker {
  display: block;
  text-transform: uppercase;          /* "CLASS OF" */
  letter-spacing: .2em;               /* ~double normal spacing */
  font-weight: 800;
  font-size: clamp(.9rem, 1.4vw, 1.1rem);
  color: #FFFFFF;
  opacity: .95;
}

.section--reunions .reunion-year {
  display: block;
  margin-top: .15rem;
  font-weight: 900;
  font-size: clamp(2.2rem, 6.5vw, 3.6rem);
  line-height: .95;
  color: var(--primary);              /* maroon */
  text-shadow: 0 4px 0 rgba(0,0,0,.15); /* subtle lift */
}

@media (max-width: 900px) {
	.section--reunions .reunion-year {
		font-size: 60px;
	}
}


.section--news {
  --bg-img: url("images/bg-news.jpg");
  /*--bg-tint: rgba(0,0,0,.35);*/
}

.section--social {
  --bg-img: url("images/bg-social.jpg");
  --bg-tint: rgba(0,26,114,.20);
}

/* === Social section =================================================== */
/* === Social: headline stays in container; embeds are full-bleed  ======= */

/* Break out from the centered container to full viewport width */
.section--social .sm-bleed {
  position: relative;
  z-index: 1;                         /* above section bg ::before */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Optional breathing room so embeds aren't glued to screen edges */
  padding-inline: clamp(12px, 3vw, 24px);
}

/* Two-column layout for embeds */
.section--social .sm-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}

/* Generic embed panel wrapper (keeps third-party widgets fluid) */
.section--social .sm-embed {
  display: block;
  width: 100%;
  min-height: 420px;                  /* safety so layout doesn’t jump */
}

/* Elfsight usually injects a root div—ensure it can fill the column */
.section--social .sm-embed > div {
  width: 100% !important;
  max-width: 100% !important;
}

/* Responsive: stack on small screens */
@media (max-width: 900px) {
  .section--social .sm-cols {
    grid-template-columns: 1fr;
  }
}

/* (Optional) If you want a subtle card look around widgets, uncomment:
.section--social .sm-embed {
  background: rgba(15,19,32,.85);
  border: 1px solid rgba(192,192,192,.15);
  border-radius: 14px;
  padding: .5rem;
}
*/


.section--sponsors {
  /*--bg-img: url("images/bg-sponsors.jpg");
  --bg-tint: rgba(0,0,0,.35);*/
	background-color: #84754e;
}

.section--contact {
  --bg-img: url("images/bg-contact.jpg");
  --bg-tint: rgba(134,38,51,.20);
}

/* === Section background system =============================== */
/* Usage in HTML: <section class="section section--bg section--artists">… */
.section--bg {
  position: relative;
  isolation: isolate;            /* keep overlays behind content */
  overflow: clip;                /* keep bg effects inside the section */
}

.section--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--bg-img, none) top right / cover no-repeat fixed;
  transform: translateZ(0);      /* paint optimization */
  z-index: -2;                   /* sit behind everything in the section */
  opacity: 1;
}

.section--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-tint, transparent);
  z-index: -1;                   /* tint above the photo, below content */
}

/* --- Global/mobile fixes --- */

/* 1) Use border-box everywhere (safe, predictable sizing) */
*, *::before, *::after { 
	box-sizing: border-box; }

/* 2) Soften section padding on small screens */
.section { 
  padding: clamp(2.5rem, 7vw, 6rem) clamp(1rem, 4vw, 2rem);
}

/* 3) Undo the hero's negative margin on phones */
@media (max-width: 640px) {
  .hero { margin-top: -90px !important; } /* previously -60px */
}


/* Load National Champion Bold (put the font files in assets/fonts/) */
@font-face {
  font-family: "National Champion";
  src:
    url("assets/fonts/NationalChampion-Bold.woff2") format("woff2"),
    url("assets/fonts/NationalChampion-Bold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Hashtag section */
.section--hashtag {
  	padding: clamp(2rem, 6vw, 5rem) 0;
  	text-align: center;
	background-color: rgba(0, 26, 114, 0.20);/*#0a0d14 #0a0d14, #0b0d12 60%, #0a0d14*/
}

.section--hashtag .hashtag-media {
  	margin: 0 auto clamp(0.75rem, 2vw, 1.25rem);
  	max-width: min(1100px, 92vw);
}

.section--hashtag .hashtag-media img {
  	width: 50%;
  	height: auto;
  	display: block;
	margin-left: auto;
  margin-right: auto;
  width: 50%;
}

@media (max-width: 640px) {
	.section--hashtag .hashtag-media img { 
		width: 100%;
	}
}

.section--hashtag .hashtag-text {
  	margin: 0;
  	font-family: "National Champion", Impact, "Arial Black", system-ui, sans-serif;
  	font-weight: 800;
  	font-size: clamp(2.8rem, 12vw, 10rem); /* very large, responsive */
  	line-height: 0.9;
  	letter-spacing: 0.02em;
  	color: var(--primary); /* #862633 */
  	text-rendering: optimizeLegibility;
}

/* === Swag Giveaway ==================================================== */
.section--swag { 
	position: relative;
	background-image: url("../images/sectionswag01.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top right;
	isolation: isolate;        /* keep blending scoped to section */
}

#fw-canvas-swag.fw-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;                /* below content, above background */
  display: block;
  pointer-events: none;
	background: transparent !important;
  /* optional: faint dark veil to help fireworks pop (tweak/disable if you like) */
  /* background: rgba(0,0,0,0.0); */
}

/* keep content above the canvas */
.section--swag .container,
.section--swag .swag-wrap {
  position: relative;
  z-index: 2;
}

/*.section--swag .container { 
	position: relative; 
	z-index: 2; 
}

.section--swag .container,
.section--swag .swag-wrap { 
	position: relative; z-index: 2; 
}

.section--swag .swag-fireworks .fw-canvas { 
	width: 100%; 
	height: 100%; 
	display: block; 
}*/

@media (max-width: 800px) {
  .section--swag { 
	  background-image: url("../images/sectionswag01_m.jpg");
	}
}

.section--swag .swag-wrap {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: .9rem;
  /*padding: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 4vw, 2rem);*/
	padding: 100px 30px;
  background: rgba(15,19,32,.65);                   /* translucent panel */
  border: 0px solid rgba(192,192,192,.18);
  /*border-radius: 16px;*/
  backdrop-filter: blur(6px);
	z-index: 2;
}

.section--swag .section-title {
  margin-bottom: .25rem;
}

.section--swag .section-lead {
  margin: 0 0 .25rem;
  color: var(--muted);
}

.section--swag .btn.btn--lg {
  justify-self: center;
}

.section--swag .swag-note {
  margin: .25rem 0 0;
  font-size: .9rem;
  color: var(--muted);
  opacity: .9;
}

/* Optional: add a subtle vignette over the section background */
.section--swag::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0,26,114,.22), transparent 60%),
    radial-gradient(1200px 600px at 10% 110%, rgba(134,38,51,.18), transparent 60%);
  z-index: 0;
}

.section--swag .swag-wrap { 
	position: relative; z-index: 1; 
}




/* === Homecoming 2025 Gear ============================================ */
.section--gear { 
	position: relative;
	background-image: url("../images/sectiongear02.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top right;
}

/* Two-column layout: blank left, content right */
.section--gear .gear-grid {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 520px);
  gap: 1rem;
  align-items: center;
  min-height: clamp(420px, 60vh, 720px);
}

/* Empty left column just ensures background is visible */
.section--gear .gear-blank {
  min-height: 240px;
}

/* Right column panel */
.section--gear .gear-panel {
  background: rgba(15, 19, 32, .68);
  border: 0px solid rgba(192,192,192,.18);
  /*border-radius: 16px;
  padding: clamp(1rem, 3vw, 1.5rem);*/
	padding: 70px 50px;
  backdrop-filter: blur(6px);
  display: grid;
  gap: .75rem;
}

@media (max-width: 800px) {
  .section--gear { 
	  background-image: url("../images/sectiongear02_m.jpg");
	}
}

/* Optional subtle vignette (remove if you don’t want it) */
.section--gear::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0,26,114,.18), transparent 60%),
    radial-gradient(1200px 600px at 10% 110%, rgba(134,38,51,.14), transparent 60%);
  z-index: 0;
}

.section--gear .gear-panel { position: relative; z-index: 1; }

/* Responsive: stack on mobile, hide the blank column */
@media (max-width: 900px) {
  .section--gear .gear-grid {
    grid-template-columns: 1fr;
  }
  .section--gear .gear-blank {
    display: none;
  }
  .section--gear .gear-panel {
    margin-inline: auto;
  }
}