* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Hard cap on document width so no descendant can ever push the page
     wider than the viewport (which on iOS would shift fixed elements). */
  overflow-x: clip;
  max-width: 100%;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  /* Guard against any sub-pixel overflow making the page horizontally
     scrollable on mobile, which can also visually shift the fixed nav. */
  overflow-x: hidden;
}

/* Locked while the mobile-nav overlay is open.
   `overflow: hidden` alone doesn't stop scroll on iOS Safari, so the JS
   also pins the body with `position: fixed; top: -<scrollY>` and restores
   the scroll position on close. The styles below cover the non-iOS path. */
body.no-scroll {
  overflow: hidden;
  width: 100%;
  /* Also lock the html element so iOS doesn't bounce-scroll the page. */
  touch-action: none;
  overscroll-behavior: none;
}
html:has(body.no-scroll) {
  overflow: hidden;
  overscroll-behavior: none;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

::selection { background: var(--blue); color: var(--black); }

a { color: inherit; text-decoration: none; }

.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  /* viewport-fit=cover lets the page bleed into the notch / rounded corners,
     so honor safe-area insets on the horizontal padding. The 2rem floor
     keeps phone breathing room comfortable. */
  padding-left: max(clamp(2rem, 5vw, 4rem), env(safe-area-inset-left));
  padding-right: max(clamp(2rem, 5vw, 4rem), env(safe-area-inset-right));
}

.mmr-logo {
  /* The outer <svg> only contains a <use href="#mmr-logo"/> — it has no
     intrinsic size of its own, so without aspect-ratio it falls back to
     the SVG default 300x150 box (which would force the nav apart).
     Match the symbol's viewBox so width:auto / height:auto compute correctly. */
  aspect-ratio: 454.64 / 319.35;
  width: 38px;
  height: auto;
  fill: var(--white);
  flex-shrink: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }