/* The System S01: local 16:9 film in place of the former image band. */
#what-it-is > .system-film{
  display:block;
  position:relative;
  width:100%;
  max-width:var(--max);
  aspect-ratio:16/9;
  border-radius:4px 4px var(--radius) var(--radius);
  overflow:hidden;
  background:#f7f5ee;
}
#what-it-is > .system-film video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#f7f5ee;
}
#what-it-is .system-film-controls{
  position:absolute;
  z-index:2;
  right:clamp(12px,2vw,26px);
  bottom:clamp(12px,2vw,26px);
  display:flex;
  align-items:center;
  gap:8px;
}
#what-it-is .system-film-controls[hidden]{display:none}
#what-it-is .system-film-controls button{
  min-height:44px;
  padding:10px 17px;
  border:1px solid rgba(244,232,207,.72);
  border-radius:4px;
  background:rgba(15,48,35,.9);
  color:#fff;
  font:600 12px/1.2 var(--sans);
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 8px 25px rgba(16,46,33,.22);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
#what-it-is .system-film-controls button:hover{background:#173f30;border-color:#d3b77d}
#what-it-is .system-film-controls button:focus-visible{outline:3px solid #f4d38b;outline-offset:3px}
#what-it-is .system-film-controls button[disabled]{opacity:.5;cursor:not-allowed}
#what-it-is .system-film-fallback{
  position:absolute;
  z-index:3;
  left:16px;
  bottom:16px;
  padding:12px 16px;
  background:#173f30;
  color:#fff;
}
#what-it-is .system-film-fallback[hidden]{display:none}
@media(max-width:600px){
  #what-it-is .system-film-controls{right:8px;bottom:8px;gap:5px}
  #what-it-is .system-film-controls button{min-height:38px;padding:7px 10px;font-size:10px}
}