/* Product brand hooks: edit these from DESIGN.md, then leave the rest alone. */
:root {
  --ae-accent: #2643d0;
  --ae-accent-dark: #8c9eff;
  --product-signal: #2c6e62;
  --product-signal-dark: #54bba4;
}

.msk-bar,
.msk-footer {
  width: min(var(--ae-measure-wide), 100% - 5rem);
}

.msk-actions {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ae-space-5);
}

.msk-nav {
  display: inline-flex;
  gap: var(--ae-space-5);
}

.msk-nav a[aria-current='page'] {
  color: var(--ae-ink);
  text-decoration-color: currentColor;
}

.msk-home {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
}

.msk-home-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('assets/hero.jpg');
  background-position: center;
  background-size: cover;
  opacity: 0.35;
  pointer-events: none;
}

.msk-home .msk-bar,
.msk-home .msk-footer,
.msk-home .ae-stage {
  position: relative;
  z-index: 1;
}

.msk-home .ae-stage {
  min-height: 0;
  overflow: hidden;
}

.msk-home-copy {
  width: min(52%, 42rem);
  display: grid;
  gap: var(--ae-space-5);
  align-self: flex-start;
  justify-items: start;
}

.msk-home-copy h1 {
  font-weight: var(--ae-w-bold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 24ch;
}

.msk-page {
  width: min(var(--ae-measure-wide), 100%);
  display: grid;
  gap: var(--ae-space-8);
  padding-bottom: var(--ae-space-8);
}

.msk-hero {
  display: grid;
  gap: var(--ae-space-4);
  max-width: 45rem;
  padding-top: var(--ae-space-6);
}

.msk-pitch {
  font-weight: var(--ae-w-medium);
}

.msk-section {
  border-top: 1px solid var(--ae-line);
  padding-top: var(--ae-space-6);
  display: grid;
  gap: var(--ae-space-5);
}

.msk-section-head {
  display: grid;
  gap: var(--ae-space-2);
  max-width: 42rem;
}

.msk-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ae-space-5);
}

.msk-shot {
  appearance: none;
  border: 1px solid var(--ae-line);
  background: var(--ae-surface);
  color: var(--ae-ink);
  padding: var(--ae-space-3);
  display: grid;
  gap: var(--ae-space-3);
  text-align: left;
  cursor: pointer;
}

.msk-shot:hover,
.msk-shot:focus-visible {
  border-color: var(--ae-ink);
}

.msk-shot img {
  width: 100%;
  /* object-fit: contain, not cover — evidence screenshots arrive in every
     aspect ratio (portrait docs, wide terminal captures, tall dashboards).
     A fixed 16/10 cover crop hid most of the frame on three separate
     shipped sites (aesthetic-911); a fixed height keeps the gallery row
     aligned without cropping any of them. */
  aspect-ratio: auto;
  height: 15rem;
  object-fit: contain;
  border: 1px solid var(--ae-line);
  background: var(--ae-wash);
}

.msk-lease-race-cast {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  border: 1px solid var(--ae-line);
  background: var(--ae-wash);
}

.msk-release-slot {
  max-width: 42rem;
}

.msk-footer {
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ae-space-4);
}

.msk-credit {
  display: inline-flex;
  align-items: center;
  gap: var(--ae-space-2);
  margin: 0;
}

.msk-gh-link {
  display: inline-flex;
  align-items: center;
}

.msk-zoom {
  width: min(76rem, calc(100vw - 3rem));
}

.msk-zoom-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ae-space-4);
  margin-bottom: var(--ae-space-4);
}

.msk-zoom-img {
  display: block;
  width: 100%;
  max-height: min(72vh, 48rem);
  object-fit: contain;
  border: 1px solid var(--ae-line);
  background: var(--ae-wash);
}

.msk-release {
  border-top: 1px solid var(--ae-line);
  padding-top: var(--ae-space-5);
  display: grid;
  gap: var(--ae-space-3);
}

.msk-release:first-of-type {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 780px) {
  /* qualified with .ae-wide, not just .msk-bar/.msk-footer: aesthetic.css's
     `.ae-wide .ae-bar` rule (two classes) otherwise outranks the plain
     one-class selector here and this override never takes effect, leaving
     80px of dead margin at phone widths — the actual cause of the nav
     "crowding" bug (aesthetic-910), confirmed by measuring the live
     bounding box at 390px. */
  .ae-wide .msk-bar,
  .ae-wide .msk-footer {
    width: min(var(--ae-measure), 100% - 2rem);
  }

  .msk-actions,
  .msk-nav {
    flex-wrap: wrap;
    gap: var(--ae-space-3);
  }

  .msk-bar .msk-nav {
    width: 100%;
  }

  .msk-gallery {
    grid-template-columns: 1fr;
  }

  .msk-home-copy {
    width: min(92%, 20rem);
  }

  .msk-footer {
    align-items: center;
  }
}