/* Max Yinger — header + footer
 * Minimal: wordmark top-left, ghost pill links, no traditional nav bar.
 * Dark, flat, 4px density, no shadows.
 */

/* ============================================================
   HEADER — wordmark + ghost pill links
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 100%;
  padding: var(--space-12) var(--edge-pad);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  transition: padding var(--dur-short) var(--ease-out);
}

.site-header.is-scrolled { padding-block: var(--space-8); }

.bt-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: var(--space-16);
}

/* Wordmark — blocky display stamp */
.bt-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
  color: var(--color-bone-glow);
}
.bt-brand__logo { display: none; }
.bt-brand__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0;
  line-height: 0.70;
  color: var(--color-bone-glow);
  text-transform: uppercase;
}

/* Nav — ghost pill links */
.bt-nav { display: block; }
.bt-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.bt-nav__list a,
.bt-pill-btn,
.site-footer a {
  color: var(--color-bone-glow);
  text-decoration: none;
}

.bt-nav__list a {
  display: inline-block;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-bone-glow);
  background: transparent;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.bt-nav__list a:hover,
.bt-nav__list a[aria-current="page"] {
  background: var(--color-bone-glow);
  color: var(--color-midnight-carbon);
}

.bt-header__right { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-4); }

/* CTA — ghost pill */
.bt-pill-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-bone-glow);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.bt-pill-btn:hover { background: var(--color-bone-glow); color: var(--color-midnight-carbon); }
.bt-pill-btn--block { width: 100%; justify-content: center; }

/* Focus */
.bt-nav a:focus-visible,
.bt-brand:focus-visible,
.bt-pill-btn:focus-visible,
.site-footer a:focus-visible,
.to-top:focus-visible { outline: 1px solid var(--color-rose-quartz); outline-offset: 2px; }

/* Mobile burger */
.bt-burger, .nav-drawer, .nav-overlay { display: none; }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.to-top {
  position: fixed;
  right: var(--edge-pad);
  bottom: var(--edge-pad);
  z-index: 250;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-bone-glow);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top svg { width: 16px; height: 16px; }
.to-top:hover { background: var(--color-bone-glow); color: var(--color-midnight-carbon); }

/* ============================================================
   FOOTER — minimal dark, corner-anchored
   ============================================================ */
.site-footer {
  position: relative;
  padding: var(--space-64) var(--edge-pad) var(--space-32);
  background: var(--color-midnight-carbon);
  color: var(--color-bone-glow);
  border-top: 1px solid var(--color-charcoal-vein);
}

.footer-shell { width: 100%; }

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-32);
  padding-bottom: var(--space-64);
}

.foot-brand { max-width: 32ch; }
.foot-kicker {
  margin: 0 0 var(--space-12);
  color: var(--color-bone-glow);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.footer-project-link {
  display: inline-flex;
  gap: var(--space-8);
  align-items: center;
  color: var(--color-bone-glow);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.footer-project-link span { color: inherit; }
.footer-project-link:hover { background: var(--color-bone-glow); color: var(--color-midnight-carbon); }

.foot-col-title {
  margin: 0 0 var(--space-8);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

.foot-nav { display: grid; gap: var(--space-4); }
.site-footer .foot-nav a,
.footer-bottom, .footer-bottom a {
  color: var(--color-bone-glow);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity var(--dur-short) var(--ease-out);
}
.site-footer .foot-nav a:hover, .footer-bottom a:hover { opacity: 1; }

.footer-wordmark {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0;
  color: var(--color-bone-glow);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4rem, 18vw, 16rem);
  letter-spacing: 0;
  line-height: 0.70;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.footer-wordmark span { color: var(--color-rose-quartz); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-32);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-charcoal-vein);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}
.foot-copy { margin: 0; }
.foot-legal { display: flex; gap: var(--space-16); }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 820px) {
  .site-header { padding: var(--space-8) var(--edge-pad); }
  .bt-nav, .bt-pill-btn { display: none; }
  .bt-burger {
    display: inline-grid;
    width: 40px; height: 40px;
    place-items: center;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-bone-glow);
    cursor: pointer;
  }
  .bt-burger .burger-line { display: block; width: 16px; height: 1px; background: var(--color-bone-glow); }
  .nav-drawer {
    position: fixed;
    top: var(--space-8); right: var(--space-8);
    z-index: 401;
    display: grid;
    width: min(360px, calc(100vw - var(--space-32)));
    padding: var(--space-16);
    border: 1px solid var(--color-charcoal-vein);
    border-radius: 0;
    background: var(--color-midnight-carbon);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
  }
  .nav-drawer.active { opacity: 1; pointer-events: auto; transform: none; }
  .nav-drawer-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-16); border-bottom: 1px solid var(--color-charcoal-vein); }
  .drawer-brand { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-muted); }
  .nav-close { display: inline-grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--color-charcoal-vein); border-radius: var(--radius-pill); background: transparent; color: var(--color-bone-glow); }
  .nav-close svg { width: 16px; height: 16px; }
  .nav-drawer-list { display: grid; gap: var(--space-4); margin: var(--space-24) 0; padding: 0; list-style: none; }
  .nav-drawer-link { color: var(--color-bone-glow); font-family: var(--font-display); font-size: 32px; line-height: 0.70; text-decoration: none; text-transform: uppercase; }
  .drawer-cta .bt-pill-btn { display: flex; }
  .nav-overlay { position: fixed; inset: 0; z-index: 400; display: block; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
  .nav-overlay.active { opacity: 1; pointer-events: auto; }
  .footer-top { flex-direction: column; gap: var(--space-24); }
}

@media (max-width: 480px) {
  .footer-bottom { flex-direction: column; gap: var(--space-8); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .bt-pill-btn, .footer-project-link, .to-top,
  .bt-nav__list a { transition-duration: 150ms; }
}