/* Epic's adjoining viewport-height windows, with AWARE's slower visual rhythm. */
.focus-windows {
  --window-count: 4;
  --window-ink: #f2e9da;
  --window-muted: #cfc4b5;
  --window-rule: #e5d6c31f;
  color: var(--window-ink);
  background: #101417;
  min-width: 0;
  overflow: hidden;
}
.windows-intro {
  display: flex;
  align-items: center;
  height: var(--bar-height);
  min-height: var(--bar-height);
  background: #000;
  gap: 24px;
  padding: 0 clamp(20px, 4vw, 88px);
}
.windows-intro { border-block: 1px solid var(--window-rule); }
.windows-intro h2 {
  margin: 0;
  font-size: var(--interface-size);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: .14em;
}
.windows-intro h2 { text-transform: uppercase; }
.windows-motion {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 20px;
  margin-left: 0;
  padding: 0 10px;
  min-height: 44px;
  border: 0;
  background: #000;
  color: var(--window-muted);
  font: var(--interface-size)/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
}
/* Keep a pause action available to keyboard and assistive-technology users
   without adding visible controls to the divider. */
.windows-motion:not(:focus-visible) {
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.windows-stage { position: relative; }
.windows-track {
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.windows-track::-webkit-scrollbar { display: none; }
.windows-strip { display: flex; width: 100%; will-change: transform; }
.focus-window {
  position: relative;
  isolation: isolate;
  flex: 0 0 calc(100% / var(--window-count));
  min-width: 0;
  height: 96.5vh;
  height: 96.5svh;
  min-height: 520px;
  overflow: hidden;
  background: #1d1915;
}
.window-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.window-media img, .window-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--crop, 50% 40%);
  transform-origin: var(--origin, 50% 40%);
}
.focus-window::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #03070c0a 10%, #090a0c00 42%, #0b0a0ac4 80%, #09090ae8 100%);
  box-shadow: inset -1px 0 var(--window-rule);
}
.window-content {
  position: absolute;
  z-index: 2;
  left: 10%;
  right: 8%;
  bottom: 11%;
  min-height: 156px;
}
.window-kicker {
  margin: 0 0 19px;
  color: #ecdeca;
  font-size: var(--interface-size);
  line-height: 1.6;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.window-content h3 {
  margin: 0;
  font-size: clamp(30px, 2.55vw, 46px);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.window-content sup {
  display: inline-block;
  font-size: .24em;
  line-height: 1;
  vertical-align: top;
  margin: .32em 0 0 .25em;
  letter-spacing: 0;
}
.window-line { margin: 19px 0 0; font-size: var(--interface-size); line-height: 1.55; color: var(--window-muted); letter-spacing: .025em; }
.window-credit { margin: 24px 0 0; font-size: var(--interface-size); line-height: 1.5; color: #c7bba9; letter-spacing: .06em; }
.window-cinematic { --crop: 51% 40%; --origin: 51% 45%; }
.window-origin { --crop: 55% 40%; --origin: 55% 40%; }
.window-performer { --crop: 50% 40%; --origin: 50% 40%; }
.window-fabric { --crop: 72% 50%; }
.window-identity { --crop: 50% 35%; --origin: 50% 30%; }
.windows-arrow {
  position: absolute;
  z-index: 3;
  top: 43%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 56px;
  height: 72px;
  padding: 0;
  border: 0;
  background: #070b0f61;
  color: #f1e5d3;
  cursor: pointer;
  transition: background-color 150ms ease-out, opacity 150ms ease-out;
}
.windows-arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.windows-prev { left: 0; }
.windows-next { right: 0; }
.windows-arrow:hover { background: #070b0fb8; }
.windows-arrow:disabled { opacity: 0; pointer-events: none; }
.focus-windows button:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; }
.windows-track:focus-visible { outline: 2px solid var(--brass); outline-offset: -3px; }
.focus-windows [hidden] { display: none; }
@media (max-width: 1199px) and (min-width: 701px) {
  .focus-windows { --window-count: 2; }
  .window-content h3 { font-size: clamp(34px, 4.6vw, 52px); }
}
@media (max-width: 700px) {
  .focus-windows { --window-count: 1; }
  .windows-intro { padding-inline: 20px; gap: 12px; }
  .window-content { left: 10%; right: 10%; bottom: 11%; }
  .window-content h3 { font-size: clamp(36px, 10vw, 52px); }
  .windows-arrow { width: 44px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .windows-arrow { transition: none; }
}

.window-brand { position: relative; display: block; width: 100%; max-width: 340px; }
.window-brand img { display: block; width: 100%; height: auto; }
.window-brand .brand-tm { position: absolute; top: -3px; right: -10px; margin: 0; font: 10px/1 Arial, sans-serif; }
.window-brand-persona { max-width: 345px; }
.window-brand-origin { max-width: 300px; }