/* ==========================================================================
   COMPONENTS — nav, buttons, marquee, forms, footer.
   Nothing here holds a raw colour or size. Everything resolves through
   tokens.css.
   ========================================================================== */

/* ==========================================================================
   NAV — sticky, and the only element pinned to the top of the viewport.

   position: sticky rather than fixed, so the bar occupies real space in the
   flow and the hero below it is never hidden underneath on first paint. It
   starts transparent over the hero and solidifies on the first scroll, which
   is what .is-stuck (set by site.js) turns on.
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: transparent;
  border-bottom: var(--rule-width) solid transparent;
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              backdrop-filter var(--dur-base) var(--ease);
}

.nav.is-stuck {
  /* Slightly transparent + blur, so the artwork scrolling under it still
     reads as motion rather than the bar looking pasted on. */
  background: rgba(26, 25, 23, 0.86);
  border-bottom-color: var(--rule-color);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
}

/* Browsers without backdrop-filter get a solid bar instead of a see-through
   one, which would otherwise leave the links unreadable over a bright frame. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-stuck { background: var(--c-charcoal); }
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: var(--nav-h);
}

.nav__brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
  flex-shrink: 0;
}

.nav__brand-mark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 1rem;
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
}

.nav__brand-sub {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent-quiet);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 2.2vw, var(--sp-7));
}

.nav__link {
  position: relative;
  display: block;
  padding-block: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
  white-space: nowrap;
}

/* The underline is a pseudo-element that scales from the left rather than a
   border that appears, so nothing shifts by a pixel when it turns on. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}

.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }

/* Set by site.js from the scroll position — which section you are actually
   looking at, not merely the last one you clicked. */
.nav__link.is-current { color: var(--text); }
.nav__link.is-current::after { transform: scaleX(1); }

.nav__end { display: flex; align-items: center; gap: var(--sp-4); }

/* --- Mobile menu ---------------------------------------------------------
   Below 860px the links move into a panel that drops out of the bar. The
   markup does not change; only where the list is drawn does. */
.nav__burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border: var(--rule);
  border-radius: var(--radius);
}

.nav__burger-bars,
.nav__burger-bars::before,
.nav__burger-bars::after {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__burger-bars { position: relative; }
.nav__burger-bars::before,
.nav__burger-bars::after { content: ""; position: absolute; left: 0; }
.nav__burger-bars::before { top: -6px; }
.nav__burger-bars::after  { top: 6px; }

.nav__burger[aria-expanded="true"] .nav__burger-bars { background: transparent; }
.nav__burger[aria-expanded="true"] .nav__burger-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border: var(--rule-width) solid transparent;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--c-cream);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--rule-color-strong);
}
.btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

.btn--gold {
  background: transparent;
  color: var(--accent-quiet);
  border-color: var(--rule-color-gold);
}
.btn--gold:hover { background: var(--c-gold-16); color: var(--accent-quiet); }

.btn--small { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-micro); }
.btn--danger { background: var(--danger); }
.btn--block { width: 100%; }

/* ==========================================================================
   MARQUEE — the scrolling location/discipline ticker.

   The track holds the same list twice and slides exactly -50%, so the second
   copy lands where the first one started and the loop is seamless. The copy
   is duplicated in the markup rather than by script, so it is already correct
   on first paint with nothing running.
   ========================================================================== */
.marquee {
  overflow: hidden;
  border-block: var(--rule);
  background: var(--c-rust);
  color: var(--c-cream);
  padding-block: var(--sp-3);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-slide 38s linear infinite;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-inline: calc(var(--sp-5) / 2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__sep { color: var(--c-gold); }

@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.field__req { color: var(--accent); }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-field);
  color: var(--text);
  border: var(--rule);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease);
}

.field__textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-body); }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--accent-quiet);
  outline: none;
}

.field__input::placeholder,
.field__textarea::placeholder { color: var(--text-faint); }

.field__error {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--danger);
}

/* An off-white section needs its fields to be light too. */
.section--invert .field__input,
.section--invert .field__select,
.section--invert .field__textarea {
  background: #FFFFFF;
  color: var(--c-charcoal);
  border-color: rgba(26, 25, 23, 0.22);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.form__note {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-mono);
  color: var(--text-faint);
}

/* A status line has to be readable the moment it appears, so it carries its
   own colour rather than inheriting a muted one. */
.form__status { font-size: var(--fs-small); }
.form__status[data-state="ok"]    { color: var(--ok); }
.form__status[data-state="error"] { color: var(--danger); }
.form__status[data-state="busy"]  { color: var(--text-faint); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  border-top: var(--rule);
  padding-block: var(--sp-8) var(--sp-6);
  background: var(--bg);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
}

.footer__mark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
}

.footer__socials { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

.footer__social {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: var(--rule-width) solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.footer__social:hover { color: var(--accent-quiet); border-bottom-color: var(--rule-color-gold); }

.footer__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

.footer__admin-link { color: var(--text-faint); }
.footer__admin-link:hover { color: var(--accent-quiet); }