/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {
  --uh-red: #c8102e;
  --uh-red-dark: #a50d24;

  --text-dark: #2f3033;
  --text-muted: #666;

  --ink: #222;
  --muted: #5f5f5f;
  --border: #e2ddd5;
  --gold: #d89b00;
  --heading-font: "League Gothic", sans-serif;
  --body-font: "Source Sans Pro", sans-serif;

  --page-width: 100%;

  --type-duration: 3s;
}


/* =========================================================
   GLOBAL
========================================================= */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}


body {
  margin: 0;
  padding: 0;

  overflow-x: hidden;

  color: var(--text-dark);

  font-family:
    "Source Sans Pro",
    sans-serif;
}


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

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--uh-red);
  outline-offset: 4px;
}



/* =========================================================
   NAVBAR
========================================================= */

.skip-link {
  position: absolute;

  top: -100px;
  left: 1rem;

  z-index: 2000;

  padding: 0.7rem 1.1rem;

  color: #fff;

  background: var(--uh-red);

  border-radius: 0 0 6px 6px;

  font-weight: 700;

  text-decoration: none;

  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

.site-navbar {
  min-height: 64px;

  background: #fff;

  border-bottom: 1px solid #e6e1db;
}

.site-navbar .navbar-brand {
  display: flex;

  align-items: center;

  gap: 18px;

  margin-right: 14px;

  white-space: normal;
}

.brand-name {
  color: var(--uh-red);

  font-size: 0.93rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.site-navbar .nav-link {
  padding: 14px;

  color: var(--uh-red);

  font-size: 1.05rem;

  font-weight: 600;
}

.site-navbar .nav-link .bi {
  color: var(--uh-red);

  font-size: 1.3rem;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.site-navbar .nav-link:hover {
  color: var(--text-muted);
}

.site-navbar .nav-link:hover .bi {
  color: var(--text-muted);

  transform: translateX(3px);
}

@media (max-width: 991.98px) {
  .site-navbar .navbar-nav .nav-link {
    padding: 0.7rem 0;
  }
}




/* =========================================================
   BREADCRUMB
========================================================= */

.breadcrumb-nav {
  border-bottom:
    1px solid
    var(--border);

  background:
    #faf7f2;
}

.breadcrumb-nav ol.breadcrumb {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.35rem;

  margin: 0;

  padding:
    0.9rem 5rem;

  list-style: none;

  font-size: 0.95rem;

  letter-spacing: 0.02em;
}

.breadcrumb-nav .breadcrumb-item {
  display: flex;

  align-items: center;

  gap: 0.35rem;
}

.breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
  content: "/";

  padding-inline: 0;

  color: var(--muted);

  opacity: 0.55;
}

.breadcrumb-nav .breadcrumb-item a {
  color: var(--uh-red);

  font-weight: 600;

  text-decoration: none;
}

.breadcrumb-nav .breadcrumb-item a:hover,
.breadcrumb-nav .breadcrumb-item a:focus {
  color: var(--uh-red-dark);

  text-decoration: underline;

  text-underline-offset: 3px;
}

.breadcrumb-nav .breadcrumb-item.active {
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .breadcrumb-nav ol.breadcrumb {
    padding:
      0.9rem 1.5rem;
  }
}




/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  min-height: 85vh;

  padding:
    1rem 1.5rem 5rem;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  color: #fff;

  background:
    linear-gradient(
      rgba(200, 16, 46, 0.65),
      rgba(0, 0, 0, 0.68)
    ),
    url("../images/uh-games-splash.jpg")
    center / cover
    no-repeat;
}


.hero::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at center,
      transparent 20%,
      rgba(0, 0, 0, 0.18) 100%
    );

  pointer-events: none;
}


.hero-content {
  position: relative;

  z-index: 2;

  width: 100%;

  max-width: var(--page-width);

  margin: auto;
}

.hero-badge {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.hero-badge img {
  width: min(540px, 88%);
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}


/* =========================================================
   TYPEWRITER TITLE
========================================================= */

.banner-title {
  margin:
    0.5rem auto 1rem;

  font-family:
    "League Gothic",
    sans-serif;

  font-size:
    clamp(4.5rem, 8vw, 8rem);

  font-weight: 400;

  line-height: 1.05;

  letter-spacing: 0.025em;

  color: #f1f5f9;

  text-transform: uppercase;
  text-align: center;
}

#typewriter-title {
  display: inline-block;

  min-height: 1em;

  white-space: nowrap;

  border-right: 0.06em solid currentColor;

  animation: typewriter-caret 0.7s step-end infinite;
}

#typewriter-title.typing-complete {
  border-right-color: transparent;
  animation: none;
}

@keyframes typewriter-caret {
  0%,
  100% {
    border-color: currentColor;
  }

  50% {
    border-color: transparent;
  }
}



/* =========================================================
   HERO SUBTITLE
========================================================= */

.sub-title {
  max-width:
    55ch;

  margin:
    0 auto;

  padding:
    0 1rem;

  color:
    #fff;

  font-family:
    "Source Sans Pro",
    sans-serif;

  font-size:
    clamp(1.25rem, 2vw, 1.8rem);

  font-weight:
    400;

  line-height:
    1.5;

  opacity:
    0;

  transform:
    translateY(35px);

  animation:
    fade-up
    1s
    ease
    forwards;

  animation-delay:
    calc(
      var(--type-duration) + 0.45s
    );
}



/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-buttons {
  display: flex;

  justify-content: center;
  align-items: center;

  flex-wrap: wrap;

  gap: 1rem;

  margin-top:
    2.5rem;

  opacity:
    0;

  transform:
    translateY(35px);

  animation:
    fade-up
    1s
    ease
    forwards;

  animation-delay:
    calc(
      var(--type-duration) + 0.9s
    );
}


.hero-buttons .btn {
  min-width:
    190px;

  padding:
    0.8rem 1.5rem;

  font-weight:
    700;
}



/* =========================================================
   FADE ANIMATION
========================================================= */

@keyframes fade-up {

  from {
    opacity: 0;

    transform:
      translateY(35px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}



/* =========================================================
   MAIN SECTIONS
========================================================= */

.tracks, 
.contact {
  max-width:
    var(--page-width);

  margin:
    6rem auto;

  padding:
    2rem 5rem;

  color:
    var(--text-dark);

  font-size:
    1.2rem;

  line-height:
    1.6;

  background-color: #fffdf9;
}

.tracks-lede {
  max-width: 100%;

  margin-bottom: 2.75rem;
}



/* Section headings */

.about-split h2,
.tracks h2,
.contact h2 {
  margin-bottom:
    1.5rem;

  font-family:
    "League Gothic",
    sans-serif;

  font-size:
    clamp(3.8rem, 6vw, 5.5rem);

  font-weight:
    400;

  line-height:
    1;
 
}



/* Underline */

.partial-underline {
  display:
    inline-block;

  border-bottom:
    5px solid
    var(--uh-red);
}



/* =========================================================
   ABOUT
========================================================= */

.about-split {
  max-width:
    var(--page-width);

  min-height:
    420px;

  margin:
    3rem auto;

  padding:
    2rem 5rem;

  display:
    flex;

  align-items:
    stretch;

  gap:
    3rem;

  background-color: #fffdf9;
}


.about-split .text-side {
  flex:
    1 1 45%;

  display:
    flex;

  align-items:
    center;

  padding:
    2rem;

  opacity:
    0;

  transform:
    translateX(-70px);

  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}


.about-split .text-side.visible {
  opacity:
    1;

  transform:
    translateX(0);
}


.about-split .text-side p {
  font-size:
    1.15rem;

  line-height:
    1.65;
}


.about-stats {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(140px, 1fr));

  gap: 1.5rem 2rem;

  margin-top: 2rem;
}


.about-stats .stat {
  display: flex;

  flex-direction: column;

  gap: 0.25rem;

  padding: 1rem 1.25rem;

  border: 1px solid var(--border);

  border-radius: 8px;

  background: #fff;
}


.about-stats .stat-number {
  color: var(--uh-red);

  font-family: "League Gothic", sans-serif;

  font-size: 2.4rem;

  line-height: 1;
}


.about-stats .stat-label {
  color: var(--text-muted);

  font-size: 0.85rem;

  line-height: 1.35;
}


.about-split .image-side {
  flex:
    1 1 45%;

  min-height:
    380px;

  background:
    var(--uh-red)
    url("../images/app-contest-2.jpg")
    center / cover
    no-repeat;

  clip-path:
    polygon(
      12% 0,
      100% 0,
      100% 100%,
      0 100%
    );

  border-radius: 4px;

  border-bottom: 8px solid var(--uh-red);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  margin-top:
    5rem;

  padding:
    1.5rem;

  text-align:
    center;

  color:
    #fff;

  background:
    var(--uh-red);
}


.footer p {
  margin:
    0;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {
  position: fixed;

  right: 1.25rem;
  bottom: 1.25rem;

  z-index: 1050;

  display: none;

  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  color: #fff;

  background: var(--uh-red);

  border-radius: 50%;

  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.4);

  text-decoration: none;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.back-to-top.show {
  display: flex;
}

.back-to-top:hover {
  background: var(--uh-red-dark);

  transform: translateY(-3px);
}

.back-to-top i {
  font-size: 1.15rem;
  line-height: 1;
}



/* =========================================================
   RESPONSIVE <= 1368
========================================================= */

@media
(max-width: 1368px) {

  .tracks,
  .about-split {
    padding:
      2rem 3rem;
  }

}



/* =========================================================
   RESPONSIVE <= 992
========================================================= */

@media
(max-width: 992px) {

  .about-split {
    flex-direction:
      column;
  }

  .about-split .image-side {
    clip-path:
      none;
  }

}



/* =========================================================
   RESPONSIVE <= 768
========================================================= */

@media
(max-width: 768px) {

  .hero {
    min-height:
      100svh;

    padding:
      1rem 1rem 4rem;
  }


  .banner-title {
    margin-top:
      3rem;

    font-size:
      clamp(
        4rem,
        15vw,
        7rem
      );
  }


  .tracks,
  .about-split {
    margin:
      3rem auto;

    padding:
      1.5rem;
  }

  .about-split .text-side {
    padding:
      1rem;
  }

  .about-split .image-side {
    min-height:
      280px;
  }

}



/* =========================================================
   RESPONSIVE <= 580
========================================================= */

@media
(max-width: 580px) {

  .hero {
    padding:
      1rem 1rem 3rem;
  }


  .banner-title {
    margin:
      1rem auto 1rem;

    font-size:
      clamp(
        3.2rem,
        14vw,
        5rem
      );
  }


  .sub-title {
    font-size:
      1.15rem;

    max-width:
      90%;
  }


  .hero-buttons {
    flex-direction:
      column;
  }


  .hero-buttons .btn {
    width:
      min(
        100%,
        300px
      );
  }

}



/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media
(prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .sub-title,
  .hero-buttons {
    opacity: 0;
    transform: translateY(35px);
    animation: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .sub-title.visible,
  .hero-buttons.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .about-split .text-side {
    opacity:
      1;

    transform:
      none;

    transition:
      none;
  }

  .track-card,
  .track-link .arrow,
  .back-to-top {
    transition: none;
  }

  .track-card:hover,
  .track-card:hover .arrow,
  .back-to-top:hover {
    transform: none;
  }

}



/* =========================================================
   TRACK CARDS
========================================================= */

.track-card {
  --accent: var(--uh-red);

  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 278px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fffdf9;
  color: var(--ink);
  text-decoration: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

    .track-card:hover {
      color: var(--ink);
      border-color: var(--accent);
      transform: translateY(-4px);
      box-shadow: 0 12px 26px #30271b14;
    }

    .track-card:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 4px;
    }

    .track-rail {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 28px 12px;
      background: var(--accent);
      color: #fff;
    }

    .track-label {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.23em;
      text-transform: uppercase;
    }

    .track-number {
      font-family: var(--heading-font);
      font-size: 4.1rem;
      line-height: 1.1;
    }

    .track-rule {
      width: 44px;
      margin-top: 12px;
      border-top: 1px solid #ffffff80;
    }

    .track-icon {
      width: 42px;
      height: 42px;
      margin-top: auto;
      padding-top: 2px;
      color: #fff;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .track-content {
      display: flex;
      min-width: 0;
      flex-direction: column;
      align-items: flex-start;
      padding: 27px;
    }

    .track-category {
      margin-bottom: 12px;
      color: var(--accent);
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .track-title {
      margin-bottom: 10px;
      font-family: var(--heading-font);
      font-size: clamp(1.85rem, 2.5vw, 2.25rem);
      line-height: 1.08;
      letter-spacing: -0.02em;
      overflow-wrap: break-word;
    }

    .track-subtitle {
      display: block;
      margin-top: 8px;
      font-family: "DM Sans", sans-serif;
      font-size: 0.94rem;
      line-height: 1.5;
      letter-spacing: normal;
    }

    .track-leads {
      margin-bottom: 20px;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.6;
    }

    .track-link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
      color: var(--accent);
      font-size: 0.88rem;
      font-weight: 700;
    }

    .track-link .arrow {
      font-size: 1.25rem;
      line-height: 1;
      transition: transform 180ms ease;
    }

    .track-card:hover .arrow {
      transform: translateX(5px);
    }
    .track-games    { --accent: #C8102E; } 
    .track-justice  { --accent: #54585A; }
    .track-vr       { --accent: #D89B00; }
    .track-mobility { --accent: #005950; }
    .track-research { --accent:  #888B8D }
    .track-wellness { --accent: #960C22; }
    .track-story    { --accent:  #00B388; }
    .track-behavioral { --accent:  #640817; }
    .track-giants   { --accent:  #B97800; }
    
/* Shared content gutter: keep this after the existing responsive rules. */
:root {
  --section-gutter: 5rem;
}

.about-split,
.contact {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--section-gutter);
}

/* The section already supplies its horizontal inset. */
.about-split .text-side {
  padding-inline: 0;
 
}

/* A body-level footer spans the viewport without 100vw overflow. */
.footer {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--section-gutter);
}

@media (max-width: 1368px) {
  :root { --section-gutter: 3rem; }
}

@media (max-width: 768px) {
  :root { --section-gutter: 1.5rem; }
  .contact { margin-block: 3rem; padding-block: 1.5rem; }
}
/* =========================================================
   ORGANIZER profile card
========================================================= */

.organizer-section {
  margin-top: 3rem;
}

.organizer-card {
  overflow: hidden;
  background: #fff;
  border-top: 5px solid var(--uh-red);
  border-radius: 12px;
  box-shadow: 0 5px 25px -8px rgba(0, 0, 0, 0.15);
}

.organizer-header {
  padding: 2rem 2rem 1.5rem;
}

.organizer-name {
  margin-bottom: 0.25rem;
  font-family: "League Gothic";
  font-size: 2.3rem;
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  line-height: 1.1;
}

.organizer-title {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--uh-red);
}

.organizer-dept,
.organizer-role {
  margin: 0;
  font-size: 0.9rem;
  color: #6c757d;
  line-height: 1.5;
}

.organizer-body {
  display: flex;
  gap: 1rem;
  padding: 0 2rem 2rem;
}


.organizer-info {
  flex: 1;
  border-left: 3px solid var(--uh-red);
  margin-left: 1rem;
}

.organizer-subheading {
  font-family: var(--heading-font);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 2px solid var(--uh-red);
  display: inline-block;
}

.organizer-bio {
  font-size: 0.92rem;
  line-height: 1.7;
  color: #444;
}

.organizer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.organizer-tags .tag {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--uh-red);
  background: #fff2ef;
  border: 1px solid #f6c9c4;
  border-radius: 20px;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .organizer-body {
    flex-direction: column;
  }

  .organizer-photo img {
    width: 120px;
    height: 120px;
  }

  }


.uhgames-director 
{
        max-width:
          var(--page-width);

          min-height:
          200px;

          margin:
        4rem auto;

        padding:
          2rem 5rem;
}
@media (max-width: 1200px){
  .uhgames-director{
    padding: 2rem 1rem;
  }
}
        
.uhgames-director h2 {
   margin-bottom:
    1.5rem;

  font-family:
    "League Gothic",
    sans-serif;

  font-size:
    clamp(3.8rem, 5vw, 5.5rem);

  font-weight:
    400;

  line-height:
    1;
}