/* MCNH Technology — main site stylesheet
   The page markup carries most of its own layout/color via inline styles
   (kept close to the original mockup on purpose). This file supplies the
   design tokens those inline styles reference, global resets, the few
   things that can't be done inline (keyframes, :hover/:focus states that
   aren't handled by the attribute-interpreter in js/main.js, print/skip
   rules) and small responsive corrections. */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #0f1820;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  background: #0f1820;
}

a { color: #94bce3; }
a:hover { color: #b5d9fd; }

::selection { background: rgba(148, 188, 227, 0.34); color: #eef3f7; }

@keyframes mcnh-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
@keyframes mcnh-blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.25; }
}

/* Skip link for keyboard/screen-reader users — invisible until focused */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: #94bce3;
  color: #0f1820;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 16px;
  transition: top 180ms ease;
}
.skip-link:focus { top: 12px; }

/* Mobile corrections — the layout is largely fluid via clamp()/auto-fit,
   these tighten a few spots that don't have a fluid minmax() basis. */
@media (max-width: 760px) {
  #mcnh-nav nav { justify-content: flex-end; }
  #mcnh-stage { padding-bottom: clamp(64px, 20vw, 140px) !important; }
  #mcnh-stage > div[data-depth="1.5"],
  #mcnh-stage > div[data-depth="2.2"],
  #mcnh-stage > div[data-depth="3"] {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin-top: 14px;
  }
}