/* Case pages, loaded after the case styles: the nav spans the page, one background
   top to bottom, and the home page's footer. */

/* Nav: span the page at every width, on the same margins as the content. */
.mm-nav-inner { max-width: none; }

/* One background, top to bottom. */
.case-hero { background: var(--bg); }

/* Footer: the home page's footer. Its rows sit on the same lines as the home page:
   41.83% and 67.32% of the inset content width, inside a 48px-margin box. */
.mm-footer {
  margin-top: 64px;
  padding: 72px 48px 48px;
  background: #000;
  color: #fff;
  font-family: Inter Display, Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mm-footer .mono {
  font-family: Source Code Pro, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.mm-footer .contact-meta {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-bottom: 24px;
}
.mm-footer .reach {
  display: block;
  width: 100%;
  padding-top: 12px;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--line);
}
.mm-footer .reach img { display: block; width: 100%; height: auto; }
.mm-footer .contact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-top: 28px;
  align-items: start;
}
.mm-footer .contact-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.mm-footer .contact-copy {
  margin: 0;
  max-width: 46ch;
  color: #fff;
  font-family: Source Code Pro, SFMono-Regular, Consolas, monospace;
  font-size: 14.4px;
  line-height: 1.36;
  font-weight: 400;
}
.mm-footer .contact-cta {
  color: #fff;
  text-decoration: none;
  font-family: Clash Display, Clashdisplay, sans-serif;
  font-size: 12px;
  line-height: 15.6px;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.mm-footer .contact-cta .cta-email { margin-left: .5em; user-select: all; }
.mm-footer .footer-nav { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.mm-footer .footer-nav a { color: #fff; text-decoration: none; transition: opacity .18s ease; }
.mm-footer .footer-nav a:hover,
.mm-footer .footer-nav a:focus-visible,
.mm-footer .contact-cta:hover,
.mm-footer .contact-cta:focus-visible { opacity: .6; }
.mm-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.mm-footer .copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 992px) {
  .mm-footer .contact-meta { grid-template-columns: calc(41.83% + 14.64px) calc(25.49% - 45.68px) minmax(0, 1fr); }
  .mm-footer .contact-row { grid-template-columns: calc(41.83% + 14.64px) minmax(0, 1fr); gap: 0; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .mm-footer .contact-meta { grid-template-columns: 41.83% 25.49% minmax(0, 1fr); }
  .mm-footer .contact-row { grid-template-columns: 41.83% minmax(0, 1fr); gap: 0; }
}
@media (min-width: 768px) {
  .mm-footer .footer-nav { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; }
  .mm-footer .contact-lead { grid-column: 2; grid-row: 1; }
}
@media (max-width: 767px) {
  .mm-footer { padding: 54px 24px 48px; }
  .mm-footer .contact-meta { grid-template-columns: 1fr 1fr; }
  .mm-footer .contact-meta > :nth-child(3) { display: none; }
}
@media (max-width: 479px) {
  .mm-footer .contact-row { gap: 32px; }
}

/* Nav mark: the MM symbol, 2:1, white, centred on the nav line. */
.mm-nav-mark { display: block; flex: none; width: 36px; height: 18px; color: #fff; }
@media (max-width: 767px) { .mm-nav-mark { width: 32px; height: 16px; } }

/* Enlarge on everything: the A&F flow films open like the screens beside them (select the film; the
   Play control stays on top), and ShopSense's storefront band has its Enlarge on the content's margin. */
.mugen-case .anf-motion-frame { position: relative; }
.mugen-case .anf-motion-enlarge {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.mugen-case .anf-motion-enlarge:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.mugen-case .anf-motion-frame .case-loop-toggle { z-index: 2; }
.mugen-case .case-band > .case-enlarge-label { width: auto; margin: 8px var(--case-inset) 0 auto; }