/* ============================================================
   Base chrome — floating navbar + footer. Shared by every page
   via base.html. All values from the design system tokens.
   ============================================================ */

/* Global border-box so width:100% + padding never overflows (e.g. the nav).
   Lives here because base.css loads on every page. */
*, *::before, *::after { box-sizing: border-box; }

/* No text selection — tapping around shouldn't drop a blue highlight. Also kills
   the mobile tap-highlight. Inputs opt back in for the day we add a form. */
html {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* ---- Navbar: fixed, transparent, blends against whatever is behind it ---- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--margin-page);
  mix-blend-mode: difference;   /* white chrome reads on light OR dark behind */
  pointer-events: none;          /* transparent gaps never swallow clicks */
}
/* re-enable interaction only on the actual controls */
.nav__brand,
.nav__center,
.nav__links a { pointer-events: auto; }

.nav__brand {
  display: inline-block;          /* inline <a> ignores the magnetic transform */
  color: #fff;
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: var(--tracking-heading);
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Center: doodle pointer to the demos ---- */
.nav__center {
  position: absolute;            /* truly centred regardless of side widths */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nav__doodle {
  width: 130px;
  height: 60px;
  overflow: visible;
  flex: 0 0 auto;
}
.nav__doodle-arrow {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav__demos {
  display: inline-block;
  color: #fff;
  font-family: var(--font-doodle);
  font-weight: var(--weight-doodle);
  font-size: clamp(22px, 2.4vw, 34px);  /* the main attraction */
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transform-origin: center;        /* rotation + pulse handled in navbar.js */
}

/* ---- Right: magnetic section links ---- */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);                      /* tight, even cluster — was space-7 (sprawled) */
  /* slim pill backdrop hugging the section links, vertically centred */
  background: rgba(255, 255, 255, 0.12);
  padding: var(--space-2) var(--space-4);
  border-radius: 100px;                     /* full pill, per design-system pill convention */
  margin-right: var(--space-5);             /* inset from the edge — don't kiss the viewport */
  pointer-events: auto;
}
.nav__link {
  position: relative;
  display: inline-block;
  color: #fff;
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1;                /* caps box = cap height → centres cleanly in the pill */
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  text-decoration: none;
  will-change: transform;        /* magnetic translate (navbar.js) */
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 1px;
  width: 0;
  background: #fff;
  transition: width var(--duration-fast) var(--ease-out-expo);
}
.nav__link:hover::after { width: 100%; }

/* magnetic targets (brand + links) get GPU-friendly transforms */
.nav__magnetic { will-change: transform; }

/* ---- Footer = Contact (dark closing panel on every page) ---- */
.footer { background: var(--dark-bg); }

/* Contact block — dark tokens. Lives in base.css because the footer ships
   on every page. Sizing/spacing identical to the old #contact section. */
.contact__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-10) var(--margin-page) var(--space-6);
}
.contact__eyebrow {
  margin: 0 0 var(--space-5);
  font-size: var(--text-nav);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--dark-muted);
}
.contact__title {
  margin: 0;
  font-weight: var(--weight-light);
  font-size: var(--text-display);
  line-height: var(--lh-section);
  letter-spacing: var(--tracking-section);
  color: var(--dark-fg);
}
.contact__email {
  display: inline-block;
  margin: var(--space-7) 0 var(--space-8);
  font-weight: var(--weight-light);
  font-size: clamp(22px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: var(--tracking-section);
  color: var(--dark-fg);
  text-decoration: none;
  word-break: break-word;
  background-image: linear-gradient(var(--dark-fg), var(--dark-fg));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--duration-base) var(--ease-out-expo);
}
.contact__email:hover { background-size: 100% 1px; }

.contact__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--dark-border);
}
.contact__social {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--dark-border);
  text-decoration: none;
  color: var(--dark-fg);
}
.contact__social-label {
  font-size: var(--text-heading);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-heading);
  color: var(--dark-muted);
  transition: color var(--duration-fast) var(--ease-out-expo);
}
.contact__social-handle { font-size: var(--text-body); color: var(--dark-muted); }
.contact__social-arrow {
  font-size: 20px;
  color: var(--dark-muted);
  transition: transform var(--duration-fast) var(--ease-out-expo),
              color var(--duration-fast) var(--ease-out-expo);
}
.contact__social:hover .contact__social-label,
.contact__social:focus-visible .contact__social-label { color: var(--dark-fg); }
.contact__social:hover .contact__social-arrow,
.contact__social:focus-visible .contact__social-arrow {
  transform: translate(4px, -4px);
  color: var(--dark-fg);
}

/* Bottom row — the blob is the footer's signature: a big squash-and-stretch
   ball that bounces (footer.js). Stacked above the copyright so the hop has
   room and actually reads. */
.footer__base {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  margin-top: var(--space-9);
  padding-top: var(--space-8);
  border-top: 1px solid var(--dark-border);
  color: var(--dark-muted);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
}
.footer__base p { margin: 0; }
.footer__blob {
  display: block;
  width: clamp(80px, 9vw, 120px);
  height: clamp(80px, 9vw, 120px);
  flex: 0 0 auto;
  overflow: visible;           /* let the stretch spill past the box */
  will-change: transform;
}
#footer-blob-path { fill: var(--dark-fg); }

@media (max-width: 900px) {
  .contact__social { grid-template-columns: 1fr auto; }
  .contact__social-handle { grid-column: 1 / -1; order: 3; }
}