/* ===========================
   CSS CONTROL VARIABLES
   =========================== */

/* Banner */
:root {
  --banner-speed-px-per-sec: 60;           /* Absolute speed (px/sec) */
  --banner-font-family: "Courier Prime", sans-serif;
  --banner-font-size: 16px;
  --banner-text-color: #ffffff;
  --banner-bg-color: #ffffff00;
  --banner-gap: 50px;                       /* Gap between repeated banner chunks */

  /* Logo */
  --logo-width-home: 200px;                /* Logo size on home page */
  --logo-width-sub: 140px;                 /* Logo size on sub pages */
  --logo-margin-top-home: 80px;            /* Distance from banner to logo (home) */
  --logo-margin-top-page: 16px;            /* Distance from page top to logo (subpage) */

  /* Background overlay (0 = no dim, 1 = full black) */
  --bg-dim-opacity: 0.5;

  /* Home event block */
  --event-block-margin-top: 0vh;           /* Distance from header to event block */
  --event-title-font-family: "Helvetica Neue", sans-serif;
  --event-title-font-size: clamp(28px, 8vw, 52px);
  --event-title-color: #ffffff;

  /* Countdown */
  --countdown-font-family: "Helvetica Neue", SFMono-Regular, Menlo, monospace;
  --countdown-font-size: clamp(18px, 17vw, 660px);
  --countdown-color: #ffffff;
  --countdown-margin-top: -0.3em;          /* Distance between event title and countdown */
  --countdown-separator: ":";               /* Editable separator between time parts */
  --countdown-item-gap: 0px;                /* Distance around the separator */

  /* Home links */
  --links-margin-top: 110px;                /* Distance from event block to links */
  --link-font-family: "Courier Prime", sans-serif;
  --link-font-size: clamp(18px, 10vw, 28px);
  --link-color: #ffffff;
  --link-hover-color: #ffd54a;
  --link-vertical-spacing: 2px;             /* Distance between stacked links */

  /* Subpage header */
  --back-font-family: "Courier Prime", sans-serif;
  --back-font-size: 14px;
  --back-color: #ffffff;

  --sub-title-margin-top: 20px;             /* Distance from logo to subpage title */
  --sub-title-font-family: "Helvetica Neue", sans-serif;
  --sub-title-font-size: clamp(24px, 23vw, 90px);
  --sub-title-color: #ffffff;

  /* Subpage content block */
  --sub-content-margin-top: 2vh;            /* Distance from header to content block */
  --sub-content-font-family: "Courier Prime", sans-serif;
  --sub-content-font-size: 18px;
  --sub-content-color: #ffffff;
  --sub-content-max-width: 720px;

  /* Footer */
  --footer-font-size: 14px;
  --footer-color: #cfcfcf;
  --footer-offset: 0px;                    /* how far below the edge AND below content the footer sits */
}

/* ===========================
   fonts
   =========================== */

@font-face {
  font-family: "Elegant Typewriter Regular";
  src: url("fonts/elegant-typewriter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SplendidN";
  src: url("fonts/SplendidN.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("fonts/Courier\ Prime.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===========================
  Base / Layout
  =========================== */

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
}
body {
  color: #fff;
  background: #000;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.35;
  overflow-x: hidden;
}

/* this wrapper lets us push the footer below the fold by --footer-offset
   while also keeping it --footer-offset below the last content on long pages */
.page-shell {
  min-height: calc(100vh + var(--footer-offset));
}

/* Background */
.bg {
  position: fixed; inset: 0; z-index: -2;
}
.bg__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.bg__dim {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(0,0,0,var(--bg-dim-opacity));
}

/* Use fallback image if JS flags it */
body.use-fallback .bg__video { display: none; }
body.use-fallback .bg { background: center/cover no-repeat url("images/fallback.png"); }

/* ===========================
   Headers
   =========================== */
.header {
  position: relative;
  width: 100%;
  padding-inline: 16px;
  padding-top: 8px;
}

/* Home header with banner */
.header--home .header__logo-wrap { margin-top: var(--logo-margin-top-home); }
.header__logo-wrap { display: flex; justify-content: center; }
.header__logo-wrap--center { margin-top: var(--logo-margin-top-page); }

/* Different logo sizes for home and subpages */
.header--home .header__logo { width: var(--logo-width-home); }
.header--page .header__logo { width: var(--logo-width-sub); }
.header__logo { height: auto; display: block; }

/* Make the banner full-bleed across the viewport */
.header--home .banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Sub page header elements */
.header--page .header__row { display: flex; align-items: center; justify-content: flex-start; }
.back-home {
  font-family: var(--back-font-family);
  font-size: var(--back-font-size);
  color: var(--back-color);
  text-decoration: none;
  opacity: 0.9;
}
.back-home:hover { color: var(--link-hover-color); }

.sub-title {
  margin: var(--sub-title-margin-top) auto 0;
  text-align: center;
  font-family: var(--sub-title-font-family);
  font-size: var(--sub-title-font-size);
  color: var(--sub-title-color);
  letter-spacing: 0.02em;
}

/* ===========================
   Banner (home) — seamless marquee driven by JS
   =========================== */
.banner {
  overflow: hidden;
  background: var(--banner-bg-color);
  color: var(--banner-text-color);
  font-family: var(--banner-font-family);
  font-size: var(--banner-font-size);
  white-space: nowrap;
}
.banner__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.banner__chunk {
  display: inline-block;
  padding: 8px 0;
  margin-right: var(--banner-gap);
}

/* ===========================
   Home page content
   =========================== */
.home { padding-inline: 16px; }
.home__event-block {
  margin-top: var(--event-block-margin-top);
  text-align: center;
}
.home__event-title {
  margin: 0;
  font-family: var(--event-title-font-family);
  font-size: var(--event-title-font-size);
  color: var(--event-title-color);
  letter-spacing: 0.03em;
}

/* Countdown */
.home__countdown {
  margin-top: var(--countdown-margin-top);
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0;
  font-family: var(--countdown-font-family);
  font-size: var(--countdown-font-size);
  color: var(--countdown-color);
  font-weight: 600;
}
.countdown__item { display: inline-block; min-width: 2ch; text-align: center; }
.countdown__item + .countdown__item::before {
  content: var(--countdown-separator);
  display: inline-block;
  margin: 0 var(--countdown-item-gap);
  line-height: 1;
  opacity: 0.9;
}

/* Links stack */
.home__links {
  margin-top: var(--links-margin-top);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--link-vertical-spacing);
}
.home__link {
  font-family: var(--link-font-family);
  font-size: var(--link-font-size);
  color: var(--link-color);
  text-decoration: none;
  text-transform: lowercase;
}
.home__link:hover { color: var(--link-hover-color); }

/* ===========================
   Subpage content
   =========================== */
.sub { padding-inline: 16px; }
.sub__content {
  margin: var(--sub-content-margin-top) auto 10vh;
  max-width: var(--sub-content-max-width);
  font-family: var(--sub-content-font-family);
  font-size: var(--sub-content-font-size);
  color: var(--sub-content-color);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* ===========================
   Footer (transparent, positioned via offset)
   =========================== */
.footer {
  width: 100%;
  background: transparent;
  padding: 24px 16px;
  text-align: center;
  margin-top: var(--footer-offset);   /* <- sits this far below last content */
}
.footer__link {
  font-family: var(--link-font-family);
  font-size: var(--footer-font-size);
  color: var(--footer-color);
  text-decoration: none;
}
.footer__link:hover { color: var(--link-hover-color); }

/* ===========================
   Mobile overrides
   =========================== */
@media (max-width: 768px) {
  body.page--home {
    --logo-width-home: 140px;
    --logo-margin-top-home: 250px;
    --banner-font-size: 11px;
    --link-font-size: clamp(18px, 6vw, 28px);
    --link-vertical-spacing: 4px;
  }
}
@media (max-width: 400px) {
  body.page--home {
    --logo-width-home: 120px;
    --logo-margin-top-home: 130px;
    --banner-font-size: 11px;
    --link-font-size: clamp(18px, 6vw, 28px);
    --link-vertical-spacing: 4px;
  }
}