/* not that serious run club — styles
   design tokens live here. text is lowercase everywhere on purpose. that's the bit.
   theme values live in the [data-theme] blocks below — add a new theme by adding
   a new block and a button in the switcher (see script.js). */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

:root,
[data-theme="bw"] {
  --bg: #ffffff;
  --text: #000000;
  --accent: #000000;
  --surface: #ffffff;
  --surface-text: #000000;
  --surface-accent: #000000;
  --surface-border: #000000;
  --line: rgba(0,0,0,0.35);
  --shadow: #000000;
  --hero-shadow: transparent;
  --btn-bg: #ffffff;
  --btn-text: #000000;
  --btn-border: #000000;
  --names-color: #000000;
  --link-decoration: underline;
}

[data-theme="red"] {
  --bg: #c8151c;
  --text: #fff2df;
  --accent: #f2a900;
  --surface: #fff2df;
  --surface-text: #1c0904;
  --surface-accent: #c8151c;
  --surface-border: transparent;
  --line: rgba(255,242,223,0.4);
  --shadow: #1c0904;
  --hero-shadow: #7c0d12;
  --btn-bg: #f2a900;
  --btn-text: #1c0904;
  --btn-border: #1c0904;
  --names-color: #f2a900;
  --link-decoration: none;
}

/* neon — strictly two colors: neon green background, neon magenta everything else.
   no third neutral color anywhere (that's why cards/buttons invert instead of
   using a dark "ink" tone like the other themes do). */
[data-theme="neon"] {
  --bg: #39ff14;
  --text: #ff2fd0;
  --accent: #ff2fd0;
  --surface: #ff2fd0;
  --surface-text: #39ff14;
  --surface-accent: #39ff14;
  --surface-border: #39ff14;
  --line: rgba(255,47,208,0.45);
  --shadow: #ff2fd0;
  --hero-shadow: transparent;
  --btn-bg: #ff2fd0;
  --btn-text: #39ff14;
  --btn-border: #ff2fd0;
  --names-color: #ff2fd0;
  --link-decoration: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Mono', 'Courier New', monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background 0.15s ease, color 0.15s ease;
}

a { color: var(--accent); text-decoration: var(--link-decoration); }

.wordmark {
  font-family: 'Space Mono', 'Courier New', monospace;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.5px;
}

h1, h2, h3 {
  font-family: 'Archivo Black', 'Space Mono', sans-serif;
  text-transform: lowercase;
  margin: 0 0 0.4em 0;
  line-height: 1.05;
}

p, li, span, label, button, input, a, .nav-links {
  text-transform: lowercase;
}

/* nav */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 6vw;
  border-bottom: 3px dashed var(--line);
}

.site-nav .wordmark {
  font-size: 1.4rem;
  color: var(--text);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover,
.nav-links a.active {
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
}

main {
  flex: 1;
  padding: 8vh 6vw 10vh;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* theme switcher — fixed pill, works the same way it does on the other sites */
.theme-switcher {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 3px 3px 0 var(--shadow);
}

.theme-switcher button {
  font-family: 'Space Mono', monospace;
  text-transform: lowercase;
  font-size: 0.75rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--surface-text);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.theme-switcher button.active {
  background: var(--surface-accent);
  color: var(--surface);
}

.theme-switcher button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* stamp — signature element, appears rotated like an ink stamp */
.stamp {
  display: inline-block;
  border: 4px solid var(--accent);
  color: var(--accent);
  font-family: 'Archivo Black', sans-serif;
  text-transform: lowercase;
  padding: 10px 18px;
  border-radius: 4px;
  transform: rotate(-6deg);
  font-size: 0.95rem;
  letter-spacing: 1px;
  background: rgba(0,0,0,0.08);
}

/* instagram cta card — clickable, doubles as a little profile preview */
.ig-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  margin-top: 2vh;
  padding: 40px 32px;
  border-radius: 2px;
  border: 2px solid var(--surface-border);
  background: var(--surface);
  color: var(--surface-text);
  text-decoration: none;
  box-shadow: 8px 8px 0 var(--shadow);
  transition: transform 0.1s ease;
}

.ig-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--shadow);
}

.ig-avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface-text);
  background: #fff;
}

.ig-handle {
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.25rem;
  color: var(--surface-accent);
}

.ig-bio {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.9;
}

.ig-cta {
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: underline;
}

.hero {
  text-align: left;
  padding-bottom: 4vh;
}

.hero h1 {
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  color: var(--text);
  text-shadow: 4px 4px 0 var(--hero-shadow);
}

.hero .tag {
  font-size: 1.1rem;
  max-width: 60ch;
  opacity: 0.9;
}

/* receipt card — mimics a fast food receipt printout for event stats */
.receipt {
  background: var(--surface);
  color: var(--surface-text);
  font-family: 'Space Mono', monospace;
  padding: 28px 24px;
  margin: 5vh 0;
  max-width: 420px;
  border-radius: 2px;
  border: 2px solid var(--surface-border);
  box-shadow: 8px 8px 0 var(--shadow);
  position: relative;
}

.receipt::before,
.receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background:
    linear-gradient(-45deg, var(--bg) 5px, transparent 0),
    linear-gradient(45deg, var(--bg) 5px, transparent 0);
  background-size: 12px 12px;
  background-repeat: repeat-x;
}

.receipt::before { top: -6px; }
.receipt::after { bottom: -6px; transform: rotate(180deg); }

.receipt h3 {
  color: var(--surface-accent);
  border-bottom: 1px dashed var(--surface-text);
  padding-bottom: 8px;
}

.receipt .line {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.95rem;
}

.receipt .total {
  border-top: 1px dashed var(--surface-text);
  margin-top: 8px;
  padding-top: 8px;
  font-weight: 700;
}

.section {
  margin: 6vh 0;
}

.btn {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 4px;
  text-decoration: none;
  border: 3px solid var(--btn-border);
  box-shadow: 5px 5px 0 var(--shadow);
  transition: transform 0.1s ease;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--shadow);
}

/* names — scattered like stickers thrown down at random, not a tidy list.
   each one is placed independently across the whole area so none of them
   end up sitting next to each other. */
.names-scatter {
  position: relative;
  width: 100%;
  min-height: 380px;
  margin-top: 3vh;
}

.names-scatter span {
  position: absolute;
  font-family: 'Archivo Black', 'Space Mono', sans-serif;
  text-transform: lowercase;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  color: var(--names-color);
  white-space: nowrap;
}

.name-1 { left: 1%;  top: 2%;  transform: rotate(-6deg); }
.name-2 { left: 62%; top: 0%;  transform: rotate(8deg); }
.name-3 { left: 30%; top: 20%; transform: rotate(-4deg); }
.name-4 { left: 3%;  top: 46%; transform: rotate(5deg); }
.name-5 { left: 55%; top: 52%; transform: rotate(-9deg); }
.name-6 { left: 22%; top: 76%; transform: rotate(6deg); }

@media (max-width: 640px) {
  .names-scatter { min-height: 460px; }
  .name-1 { left: 0%;  top: 0%; }
  .name-2 { left: 40%; top: 12%; }
  .name-3 { left: 5%;  top: 30%; }
  .name-4 { left: 45%; top: 44%; }
  .name-5 { left: 10%; top: 60%; }
  .name-6 { left: 40%; top: 78%; }
}

.event-graphic {
  max-width: 340px;
  margin: 3vh 0;
  transform: rotate(-2deg);
}

.event-graphic img {
  width: 100%;
  display: block;
  border-radius: 8px;
  box-shadow: 8px 8px 0 var(--shadow);
}

.form-embed {
  background: var(--surface);
  padding: 4px;
  border-radius: 4px;
  margin-top: 3vh;
  border: 2px solid var(--surface-border);
}

.form-embed iframe {
  width: 100%;
  min-height: 900px;
  border: none;
  display: block;
}

.note {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 10px;
}

footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 6vw;
  font-size: 0.8rem;
  opacity: 0.75;
  border-top: 3px dashed var(--line);
}

/* one pre-colored png per theme, swapped by simply showing/hiding —
   no CSS masking, so it can't silently fail to render. */
.footer-logo {
  display: none;
  height: 66px;
  width: auto;
  flex-shrink: 0;
}

.footer-logo.theme-bw { display: inline-block; }

[data-theme="red"] .footer-logo.theme-bw { display: none; }
[data-theme="red"] .footer-logo.theme-red { display: inline-block; }

[data-theme="neon"] .footer-logo.theme-bw { display: none; }
[data-theme="neon"] .footer-logo.theme-neon { display: inline-block; }

footer p {
  flex: 1;
  text-align: center;
  margin: 0;
}

@media (max-width: 640px) {
  .site-nav { flex-direction: column; gap: 14px; }
  .nav-links { flex-wrap: wrap; justify-content: center; }
  main { padding: 6vh 6vw 8vh; }
  footer { flex-direction: column; gap: 10px; }
  footer p { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  body { transition: none; }
}

/* neon extras — glow instead of hard offset shadows, plus a faint scanline
   texture. still just green + magenta; the scanlines are a low-opacity black
   texture, not a third design color. */
[data-theme="neon"] body {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.06) 0px,
    rgba(0,0,0,0.06) 1px,
    transparent 1px,
    transparent 3px
  );
}

[data-theme="neon"] .stamp {
  background: transparent;
  box-shadow: 0 0 12px var(--accent);
}

[data-theme="neon"] .btn {
  box-shadow: 0 0 16px var(--shadow);
}

[data-theme="neon"] .btn:hover {
  box-shadow: 0 0 26px var(--shadow);
}

[data-theme="neon"] .receipt,
[data-theme="neon"] .form-embed {
  box-shadow: 0 0 20px var(--shadow);
}

[data-theme="neon"] .event-graphic img {
  box-shadow: 0 0 20px var(--shadow);
}